Я еще не совсем разобрался во флексбоксах и не могу понять, как сделать так, что бы при масштабировании или открытии на мобильных устройствах бокс с информацией перемещался влево. Как можно это сделать?
* {
margin: 0;
padding: 0;
}
body {
background-color: #f2f2f2;
font-family: "Futura PT", sans-serif;
-webkit-font-smoothing: antialiased;
/* для корректного отображения текста на всех экранах*/
-webkit-overflow-scrolling: touch;
/*для нормального скроллинга*/
}
.header-top {
height:40px;
background: #ffffff;
line-height:40px;
}
main{
display: flex;
flex-direction: column;
width: 90%;
}
main .top-slide{
background: url(img/Чуваки.png);
width: 1240px;
height: 376px;
margin-top: 5%;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
display: block;
vertical-align: middle;
}
.box-white{
background-color: #ffffff;
width: 292px;
height: 292px;
position: absolute;
margin-top: 42px;
margin-left: 860px;
margin-right: 86px;
margin-bottom: 42px;
}
.first-p{
width: 262px;
height: 37px;
color: #5497cc;
font-family: "Futura PT";
font-size: 20px;
font-weight: 300;
position: absolute;
margin-top: 18px;
margin-right: 16px;
margin-bottom: 243px;
margin-left: 14px;
}
.cool-p{
width: 262px;
height: 59px;
color: #000000;
font-family: "Futura PT";
font-size: 20px;
font-weight: 600;
position: absolute;
margin-top: 48px;
margin-right: 15px;
margin-bottom: 185px;
margin-left: 15px;
}
.third-p{
width: 262px;
height: 86px;
color: #000000;
font-family: "Futura PT";
font-size: 16px;
font-weight: 300;
position: absolute;
margin-top: 119px;
margin-right: 15px;
margin-bottom: 87px;
margin-left: 15px;
}
.read-more-p a{
width: 95px;
height: 37px;
color: #5497cc;
font-family: "Futura PT";
text-decoration: none;
font-size: 18px;
font-weight: 500;
position: absolute;
margin-top: 253px;
margin-right: 51px;
margin-bottom: 2px;
margin-left: 146px;
}
.read-more-p img{
position: absolute;
margin-top: 257px;
margin-right: 31px;
margin-bottom: 23px;
margin-left: 247px;
}
<header>
<div class="header-top">
Header top
</div>
</header>
<div id="container" style="width:1366px;margin:0 auto;">
<!-- С помощью этого кода мы центрируем сайт-->
<main>
<section class="top-slide">
<section class="box-white">
<p class="first-p">Головне</p>
<p class="cool-p">Тут буде також дуже крутий заголовок</p>
<p class="third-p">Integer quis interdum libero. Praesent et ante et dolor tincidunt semper. Nulla id nibh vel metus molesti</p>
<p class="read-more-p"><a href="#">Читати далі</a><img src="img/arrow.png" alt="arrow"></p>
</section>
</section>