Помогите найти проблему

264
28 декабря 2018, 04:40

Не могу понять, почему при изменении размеров экрана(см. скрин) все прислоняется к левому краю и остаётся пробел справа

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>

Answer 1
.wrapper {
  max-width: 1173px;
  margin: 0 auto;
}

Исправльте стиль на такой и это решит ваши проблемы. Я избегаю таких проблем оборачиванием всего содержимого body в

<div id="main"></div>

И следующими стилями:

body, div#main {
   width: 100%;
   overflow-x: hidden;
}
READ ALSO
Как ограничить div?

Как ограничить div?

Как мне ограничить див что-бы форма заполнения встала на нужное место?

258
Как сделать такую фичу в дизайне

Как сделать такую фичу в дизайне

На сайте Inbox Google Вот увидел интересную реализацию в дизайнеФункциональные кнопки появляются только при наведении на блок(перейдите и убедитесь...

182
Как вернуть слои в Avocode?

Как вернуть слои в Avocode?

Похоже, что нажал что то не тоОткрываю макет и вижу что, панель LAYERS есть, но она пуста! Помогите!

196
insertAfter JavaScript

insertAfter JavaScript

Такой вопрос у меня сегодня появился

181