Você está usando muito position: absolute
, isso ferra com a responsividade do site. Eu te indico estudar um pouco sobre flexbox
, aplicando um pouco dessa "técnica" tu consegues manter teu site muito mais responsivo. Fiz algumas modificações no teu CSS apenas usando o flexbox e já consegui uma responsividade bem melhor sem precisar usar media queries
, que dariam uma responsividade maior, mas também são mais complexas.
/*Reset*/
* {
margin: 0;
padding: 0;
}
/*Reset*/
html {
height: 100vh;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/*Tags*/
img {
border: solid black 1px;
width: 250px;
}
/*Tags*/
main {
display: flex;
padding: 38px 15px;
}
form {
background-color: black;
}
li {
list-style: none;
display: inline;
}
/*Classification*/
.Navegation_Header {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.Navegation_Header a {
color: white;
text-decoration: none;
padding: 16px 20px;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
font-size: 19px;
}
.Navegation_Header a:hover {
color: rgb(255, 45, 45);
transition: 180ms linear;
}
/*Looper - Assassinos do futuro*/
.Looper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 100%;
border: solid black 1px;
background-color: rgb(255, 254, 246);
box-shadow: 0px 0px 18px rgb(14, 14, 14);
}
.Looper_Info {
display: flex;
flex-shrink: 1;
flex-direction: column;
max-width: 348px;
}
.Titulo_Looper {
display: flex;
padding: 12px;
color: black;
text-decoration: none;
font-size: 17px;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
.Titulo_Looper:hover {
color: rgb(255, 45, 45);
transition: 90ms linear;
}
.Info_Div {
flex: 1;
padding: 0 12px 20px 12px;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
font-size: 14px;
}
/*Looper - Assassinos do futuro*/
/*####################################################################################################################################*/
/*####################################################################################################################################*/
.Info_Name {
font-weight: bold;
}
.Info_Dados {
color: blue;
}
/*Classification*/
E pra tudo funcionar envolvi os elementos .Titulo_Looper
e Info_Div
em uma div:
<div class="Looper_Info">
<a class="Titulo_Looper" href="#">Looper - Assassinos do futuro (2012) 1080p HD</a>
<div class="Info_Div">
<!-- Conteúdo abreviado -->
</div>
</div>
Guia Flexbox que acho muito completo - em inglês: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Espero ter ajudado!