I can't center the information on the page I want, what would look like in the example. I apologize in advance for such a Noob question, I'm just learning. If there are more tips for improving the code and adaptive layout I will be glad to read them.
* { 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; } nav { display:flex; border-bottom:1px solid #ccc; background-color: #ffffff; width: 100%; height: 50%; } nav .nav-title { color:#686868; font-weight: 500; font-size: 22px; margin-bottom: 17px; margin-left: 68px; margin-right: 70px; margin-top: 22px; } nav .navigation { list-style: none; display:flex; color: gray; flex-grow:1; } nav .navigation li { text-align: center; font-size: 16px /*странно, но нижняя тень работает только так, если поставить ; она будет отображаться некорректно*/ margin-bottom: 11px; margin-top: 25px; } nav .navigation li.selectable:hover { box-shadow:0 -2px 0 0 #1c76bc inset; } nav .navigation li.left { flex-grow:1; text-align:right; margin-right: 100px; } /* Подписаться на розсылку*/ nav .navigation a{ color: #686868; text-decoration: none; text-align: center; padding: 25px 19px; } /* настройка кнопок*/ /*кнопки без адаптивного дизайна, потом доделаю*/ main{ display: flex; flex-direction: column; width: 90%; } main .top-slide{ background: url(https://www.stihi.ru/photos/malenkajaskazka.jpg); 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; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shtooooo</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <div class="header-top"> Header top </div> </header> <nav> <div class="nav-title">Блог</div> <ul class="navigation"> <li class="selectable"><a href="#">Для бізнесу</a></li> <li class="selectable"><a href="#">Для людей</a></li> <li class="left"><a href="#">Підписатися на розсилку</a></li> </ul> </nav> <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> <div class="lust-news and search"> <p class="lno">Останні новини</p> </div> </main> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="script.js"></script> </body> </html> 