столкнулся с такой проблемой, что при одинаковом разрешении (в моем случае 1920х1080) но на разного размера экранах сайт отображается по разному (на меньшем неправильно - появляется полоса )(см. фото). Как это исправить и от чего оно идёт?
html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header class="header">
<div class="flex-container15">
<div style="margin: auto;">
<p>068 831-95-69</p>
<p>050 824-61-74</p>
<p>063 676-53-59</p>
<p>044 334-31-80</p>
<p>г.Киев, ул.Борщаговская, 152а</p>
<p>Правый берег</p>
<p>г.Киев, Харьковское шоссе,55</p>
<p>Левый берег</p>
<p>пн-пт: 09:00–18:00</p>
<p>сб-вс: выходной</p>
</div>
<div style="margin: auto;"> <!-- верхняя панель -->
<a href="index.html"><img style="margin: auto;" class="logo_img" src="img/logo.png" alt=""></a>
</div>
<div style="text-align: center;">
<p>Заполнив форму заказа в не</p>
<p>рабочее время офиса. Вы</p>
<p>получаете дополнительно</p>
<p>Скидку 7%</p>
<div class="flex-container1166">
<input type="text">
<input type="text">
<input type="text">
<button>klass</button>
</div>
</div>
</div>
<hr>
<div class="flex-container2" id="header_top"> <!-- панель навигации -->
<div><a href="index.html">Головна</a></div>
<div><a href="works.html">Наші роботи</a></div>
<div><a href="sales.html">Акції</a></div>
<div><a href="reviews.html">Відгуки</a></div>
<div><a href="contacts.html">Контакти</a></div>
</div>
<hr>
</header>
<div class="line"></div>
<div style="margin: auto; text-align: center;"> <!-- главный центральный текст -->
<h1>Металопластикові вікна, двері, перегородки у Києві та передмісті</h1>
<h1>Балкон під ключ</h1>
<h1>Пряма доставка з виробництва безкоштовно в Києві та передмісті</h1>
<p>Наша команда виготовляє, доставляє і встановлює металопластикові вікна та алюмінієві конструкції різного рівня складності:</p>
<p>від вікон або дверей на балкон, до фасадних, офісних і торгових перегородок, тамбурів і веранд.</p>
<p>Скління будинків, квартир, котеджів і дач</p>
</div>
<div style="width: 100%">
<div class="flex-container" style="margin: auto;" > <!-- типы продукции -->
<div class="specialize-cards">
<div class="flex-container" style="margin: auto;" >
<div style="margin: auto;">
<h1 style="text-align: center;"><a href="dom.html">Засклити будинок</a></h1>
<a href="dom.html"><img alt="" src="img/dom.jpg"></a>
</div>
<div style="margin: auto;">
<h1 style="text-align: center;"><a href="teracce.html">Засклити терасу</a></h1>
<a href="teracce.html"><img alt="" src="img/teracce.jpg"></a>
</div>
</div>
<div class="flex-container" style="margin: auto;" >
<div style="margin: auto;">
<h1 style="text-align: center;"><a href="kvartira.html">Засклити квартиру</a></h1>
<a href="kvartira.html"><img alt="" src="img/kvartira.jpg"></a>
</div>
<div style="margin: auto;">
<h1 style="text-align: center;"><a href="balconyonkey.html">Балкон під ключ</a></h1>
<a href="balconyonkey.html"><img alt="" src="img/balconyonkey.jpg"></a>
</div>
</div>
<div class="flex-container" style="margin: auto;" >
<div style="margin: auto;">
<h1 style="text-align: center;"><a href="peregorodki.html">Перегородки</a></h1>
<a href="peregorodki.html"><img alt="" src="img/peregorodki.jpg"></a>
</div>
<div style="margin: auto;">
<h1 style="text-align: center;"><a href="tambur.html">Засклити тамбур, ганок</a></h1>
<a href="tambur.html"><img alt="" src="img/tambur.jpg"></a>
</div>
</div>
<div class="flex-container" style="margin: auto;" >
<div style="margin: auto;">
<h1 style="text-align: center;"><a href="mp-door.html">Металопластикові двері</a></h1>
<a href="mp-door.html"><img alt="" src="img/mp-door.jpg"></a>
</div>
<div style="margin: auto;">
<h1 style="text-align: center;"><a href="mp-okna.html">Металопластикові вікна</a></h1>
<a href="mp-okna.html"><img alt="" src="img/mp-okna.jpg"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
css:
.flex-container {
display: flex;
background-color: #FAFAFA;
}
.flex-container > div {
background-color: #FAFAFA;
margin: 10px;
padding: 20px;
font-size: 30px;
margin-left: auto;
margin-right: auto;
}
.flex-container2 {
display: flex;
background-color: #FAFAFA;
}
.flex-container2 > div {
background-color: #FAFAFA;
margin: 10px;
padding: 20px;
font-size: 30px;
margin-left: auto;
margin-right: auto;
}
.flex-container15 {
display: flex;
background-color: #FAFAFA;
}
.flex-container15 > div {
background-color: #FAFAFA;
margin: 10px;
padding: 20px;
font-size: 30px;
margin-left: auto;
margin-right: auto;
}
.flex-container3 {
display: flex;
background-color: #FAFAFA;
}
.flex-container3 > div {
background-color: #FAFAFA;
margin: 10px;
padding: 20px;
font-size: 30px;
}
.flex-container1166 {
display: flex;
background-color: #FAFAFA;
flex-direction: column;
}
.flex-container1166 > div {
background-color: #FAFAFA;
margin: 10px;
padding: 20px;
font-size: 30px;
}
.contact-flex {
display: flex;
background-color: #FAFAFA;
flex-direction: column;
}
.contact-flex > div {
background-color: #FAFAFA;
margin: 10px;
font-size: 30px;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
.sticky + .content {
padding-top: 102px;
}
@font-face {
font-family: "Montserrat";
src: url("fonts/Montserrat-SemiBold.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
@font-face{
font-family: "Monserrato";
src: url("fonts/Montserrat-Medium.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
h1{
font-family: "Montserrat";
}
h2{
font-family: "Montserrat";
}
h3{
font-family: "Montserrat";
}
h4{
font-family: "Montserrat";
}
h5{
font-family: "Montserrat";
}
p{
font-family: "Monserrato";
font-size: large;
}
li{
font-family: "Monserrato";
font-size: large;
}
a{
font-family: "Monserrato";
}
body{
background-color: #FAFAFA;
}
.logo_img{
display: block;
margin-left: auto;
margin-right: auto;
}
.padding-text{
padding-bottom: 10px;
}
.links{
text-decoration: underline;
font-weight: bold;
}
A {
color: black;
text-decoration: none;
}
#content {
padding: 10px;
background: #FAFAFA;
}
hr {
border: none;
background-color: #FAFAFA;
height: 75px;
padding: 0px;
}
.container {
display: flex;
flex-direction: column;
}
hr {
border: none;
background-color: black;
height: 2px;
}
@media only screen and (max-width: 480px) {
.flex-container {
display: flex;
flex-direction: column;
margin-right: 100%;
justify-content: space-between;
}
html{
width: 900px;
}
}
@media only screen and (max-width: 320px) {
.flex-container {
display: flex;
flex-direction: column;
margin-right: 100%;
justify-content: space-between;
}
html{
width: 950px;
}
}
@media only screen and (max-width: 768px) {
.flex-container {
display: flex;
flex-direction: column;
margin-right: 100%;
justify-content: space-between;
}
html{
width: 900px;
}
}
@media only screen and (max-width: 1200px) {
.flex-container {
display: flex;
flex-direction: column;
margin-right: 100%;
justify-content: space-between;
}
}
Там в ксс немножечко лишнего, не обращайте внимания)