I can not understand why when resizing the screen (see screen), everything leans against the left edge and there is a space on the right
body { font-family: "Montserrat", sans-serif; padding: 0; margin: 0; } .wrapper { width: 1173px; margin: 0 auto; } header { background: url('https://w-dog.net/wallpapers/2/4/332444738754522.jpg') no-repeat center top / cover; height: 100vh; } .heading { display: flex; justify-content: space-between; } .logotype { padding-top: 27px; display: flex; align-items: center; } .logotype h3 { font-family: "Raleway", sans-serif; /* Style for "Waxom" */ color: #ffffff; font-size: 34px; font-weight: 400; /* Text style for "Waxom" */ letter-spacing: -1.36px; } nav { float: right; margin-top: 62px; } .menu { display: block; } .menu li { float: left; display: block; } .menu a { margin-right: 30px; color: #fff; text-decoration: none; font-size: 14px; transition: all 0.3s ease; } .menu a:hover { color: #c7b299; } .speech { text-align: center; justify-content: center; margin-top: 15vh; } .speech h4 { color: #ffffff; font-family: "Raleway", sans-serif; font-size: 36px; font-weight: 500; } .speech h2 { margin-top: 12px; color: #ffffff; font-family: "Raleway", sans-serif; font-size: 52px; font-weight: 700; } .speech p { margin-top: 19px; color: #ffffff; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 300; } .button { background: #998675; color: #fff; font-family: "Raleway", sans-serif; border-radius: 3px; display: block; width: 170px; padding: 20px 0; margin: 0 auto; text-decoration: none; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 14px; margin-top: 52px; transition: all 0.3s ease; } .button:hover { border-radius: 15px; } .works { margin: 80px 0; display: flex; text-align: center; justify-content: space-between; align-items: center; } .single-work { display: block; text-align: center; padding-right: 30px; position: relative; } .single-work:after { content: ''; display: block; background: #f1eee9; width: 70px; height: 3px; position: absolute; top: 227px; right: 125px; } .single-work h3 { color: #555555; font-family: "Raleway", sans-serif; font-size: 22px; font-weight: 600; } .single-work p { width: 266px; height: 62px; color: #8c8c8c; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 300; line-height: 24px; text-align: center; } .single-work_icon { font-size: 49px; } .yellow { background-color: #fbfaf8; } .realization { padding-top: 83px; text-align: center; justify-content: center; display: block; } .realization h2 { color: #555555; font-family: "Raleway", sans-serif; font-size: 30px; font-weight: 600; } .realization p { color: #8c8c8c; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 300; line-height: 28px; margin-bottom: 40px; } .gradient { background: linear-gradient(to right, #261e1b, #493126) no-repeat center top / cover; } .purchase { margin-top: -5px; } .p-content { display: flex; justify-content: space-between; } .p-speech { height: 150px; } .p-speech_main { display: flex; align-items: center; position: absolute; margin-top: 20px; } .p-speech_main h3 { color: #c7b299; font-family: Raleway; font-size: 28px; font-weight: 400; } .p-speech_main h2 { margin-left: 10px; color: #ffffff; font-family: Raleway; font-size: 28px; font-weight: 400; } .p-speech p { color: #615855; font-family: Montserrat; font-size: 18px; font-weight: 300; position: relative; top: 70px; } <header> <div class="wrapper"> <div class="heading"> <div class="logotype"> <a href="#"><img src="img/logo.png" alt=""></a> <h3>Waxom</h3> </div> <nav> <ul class="menu"> <li><a href="">Home</a></li> <li><a href="">About Us</a></li> <li><a href="">Portfolio</a></li> <li><a href="">Features</a></li> <li><a href="">Blog</a></li> <li><a href="">Pricing</a></li> <li><a href="">Shortcodes</a></li> <li><a href="">Contacts</a></li> </ul> </nav> </div> </div> <div class="speech"> <h4>Unique and Modern Design</h4> <h2>Portfolio PSD Template</h2> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet</p> <p>doming id quod mazim placerat facer possim assum.</p> </div> <div> <a class="button" href="https://vk.com/id469310660" target="blank">Get Started</a> </div> </header> <section> <div class="wrapper"> <div class="works"> <div class="single-work"> <div class="single-work_icon"> <span class="icon-pen"><span class="path1"></span><span class="path2"></span></span> </div> <h3>Web & App Design</h3> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim.</p> </div> <div class="single-work"> <div class="single-work_icon"> <span class="icon-layers"><span class="path1"></span><span class="path2"></span></span> </div> <h3>Development</h3> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim.</p> </div> <div class="single-work"> <div class="single-work_icon"> <span class="icon-gayka"><span class="path1"></span><span class="path2"></span></span> </div> <h3>Customization</h3> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim.</p> </div> <div class="single-work"> <div class="single-work_icon"> <span class="icon-papka"><span class="path1"></span><span class="path2"></span></span> </div> <h3>Marketing </h3> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim.</p> </div> </div> </div> </section> <section class="yellow"> <div class="wrapper"> <div class="realization"> <h2>Waxom is Realization of your Ideas.</h2> <p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium.</p> <img src="img/3-layers.png" alt=""> </div> </div> </section> <section class="gradient"> <div class="purchase"> <div class="wrapper"> <div class="p-content"> <div class="p-speech"> <div class="p-speech_main"> <h3>Waxom</h3> <h2>Multipurpose WordPress Theme</h2> </div> <p>Don't Forget to Rate the Template. Thanks so much!</p> </div> <div> <a class="button" href="https://vk.com/id469310660" target="blank">Get Started</a> </div> </div> </div> </div> </section> 