Не могу понять, почему при изменении размеров экрана(см. скрин) все прислоняется к левому краю и остаётся пробел справа
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>
.wrapper {
max-width: 1173px;
margin: 0 auto;
}
Исправльте стиль на такой и это решит ваши проблемы. Я избегаю таких проблем оборачиванием всего содержимого body в
<div id="main"></div>
И следующими стилями:
body, div#main {
width: 100%;
overflow-x: hidden;
}
Сборка персонального компьютера от Artline: умный выбор для современных пользователей