Уезжает верстка при изменении масштаба экрана, как исправить?

Question

[Наталья]

Добрый день.

Подскажите, пожалуйста, почему при изменении масштаба экрана часть верстки съезжает? А именно все то, что относится к div class="simple". Как должно быть:


Как получается при уменьшении масштаба:


Помещаю код всей секции:

<section class="header_main">
  <div class="container_logo">
    <div class="header_wrapper">
          <a href="#" class="menu_logo"><img src="icons/logo/logo.png" alt="logo"></a>
          <nav>
        <ul class="menu">
            <li class="menu_item"><a href="#" class="menu_link">ABOUT</a></li>
            <li class="menu_item"><a href="#" class="menu_link">FAQ</a></li>
            <li class="menu_item"><a href="#" class="menu_link">SUPPORT</a></li>
            <li class="menu_item"><a href="#" class="menu_link">BLOG</a></li> 
        </ul>
      </nav>
        </div>
  </div>
  <div class="simple">
    <div class="container">
      <div class="row">
        <div class="col-5">
          <div class="simple_text">Simple, safe & beautiful.</div>
          <div class="simple_descr">With <span>HeyU</span>, you'll get fast, simple, secure messaging!</div>
          <button class="simple_btn">
            <p>Download now</p>
          </button>
        </div>
        <div class="col-4 offset-md-3">
          <img src="img/header/iphone.png" alt="iphone" class="simple_img">
        </div>
      </div>
    </div>
  </div>
  </section>

CSS:
.header_main {
background: url('../img/header/bg.png') center center/cover no-repeat;
height: 994px;
}

.container_logo {
display: block;
position: relative;
height: 45px;
}

.header_wrapper {
display: block;
height: 86px;
position: relative;
}

nav {
display: block;
position: absolute;
left: 1237px;
height: 86px;
margin: 53px 0 0 0;
}
.menu_logo {
display: block;
position: absolute;
margin: 41px 0 0 50px;
cursor: pointer;
}

.menu {
display: flex;
justify-content: space-between;
width: 413px;
list-style-type: none;

}

.menu .menu_link {
font-family: Lato;
font-size: 18px;
font-weight: 400;
color: #ffffff;
}

.simple {
margin-top: 201px;
min-height: 793px;
}

.simple .simple_text {
font-family: Lato;
font-size: 72px;
font-weight: 900;
letter-spacing: 0.04em;
color: #ffffff;
}

.simple .simple_descr {
width: 600px;
font-family: Lato;
font-size: 24px;
font-weight: 400;
color: #ffffff;
}

.simple .simple_descr span {
font-weight: 900;
margin-top: 43px;
}

.simple .simple_btn {
margin-top: 101px;
width: 224px;
height: 50px;
background-color: #ffffff;
box-shadow: 0px 10px 40px 0px rgba(53,53,53,0.15);
border-radius: 25px;
}

.simple .simple_btn p {
display: inline;
background: linear-gradient(0.0deg, #eb402c 0%, #d90647 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: Lato;
font-size: 18px;
font-weight: 700;
}

Answer 1

[Lord_Dantes]

Используйте этот плагин если хотите пофиксить это.

Answer 2

[Артем Федоров]

width в процентах или в wh,vw. А вообще верстайте вручную, через flexbox, без использования плагина от photoshop, ибо абсолютное позиционирование - это не всегда хорошо, тем более в px.
Ну, а с другой стороны - чем больше экран, тем удобнее, если контент не растянут по всей ширине экрана.