Медиа запросы срабатывают через раз
Когда я пишу медиа запросы и просматриваю их на адаптивность в google, меняя разрешение экрана, то все нормально, все изменяется правильно, но как только я закрываю редактор кода и захожу в него позже, то большая часть того что я писал и просчитывал, уже перестает правильно отображаться.
В чем может быть дело?
* {
margin: 0;
padding: 0;
}
body{
background-color: #EDEDED;
}
.main{
/*
display: flex;
align-items: stretch;
flex-wrap: wrap;
padding-left: 20px;
padding-right: 20px;
*/
}
header{
width: 100%;
height: 90px;
background-color: #000000;
}
h2{
font-size: 40px;
color: #FFFFFF;
font-family: Georgia;
text-align: center;
position: relative;
top: 25px;
}
section{
width: 90%;
height: 450px;
padding: 0px;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 35px;
margin-top: 35px;
background-color: #FFFFFF;
}
img{
width: 100%;
height: 70%;
}
h1{
font-size: 30px;
color: #4a4849;
font-family: Georgia;
margin: 5px;
}
footer{
width: 100%;
height: 150px;
margin-top: 125px;
background-color: #212324;
}
@media (min-width: 768px) {
.main{
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
section{
width: 44%;
height: 530px;
padding: 0px;
margin-left: 3%;
margin-right: 3%;
margin-bottom: 30px;
margin-top: 30px;
background-color: #FFFFFF;
}
img{
width: 100%;
height: 60%;
}
h1{
font-size: 30px;
color: #4a4849;
font-family: Georgia;
margin: 5px;
}
}
@media (min-width: 992px) {
.main{
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
section{
width: 29.3%;
height: 470px;
padding: 0px;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 25px;
margin-top: 35px;
background-color: #FFFFFF;
}
img{
width: 100%;
height: 60%;
}
h1{
font-size: 30px;
color: #4a4849;
font-family: Georgia;
margin: 5px;
}
}