Почему сайт гуляет на мобильных экранах?

Question

[Ily4farmer]

Решил попрактиковать верстку под мобильные устройства, сверстал весь макет и столкнулся со следующей проблемой.
Когда сайт на десктопе в браузере, все выглядит как надо

И он даже нормально адатпитируется под размер экранов

Но как только я решаюсь переключиться на любую мобильную версию(iphone x к примеру), сразу же все становится непонятно

Если нажать на любую кнопку, то сайт встает как надо, но при этом я могу передвинуть сам сайт левее

Как это исправить?
Вот код https://jsfiddle.net/ily4famer/hmt21wzk/1/

Comments

[Lord_Dantes]

Загрузите код на песочницу

[Ily4farmer]

s l a v e, я не знаю, что такое песочница

[inkShio]

Ily4farmer, песочница это сайты где можно выложить свой код codepen.io, jsfiddle.net и т.д.

[Rustam Bainazarov]

<meta name="viewport" content="width=device-width, initial-scale=1.0">

В тег head.

[Ily4farmer]

Рустам Байназаров, этот тег присутствует в версте

[Rustam Bainazarov]

Ily4farmer, ну тогда песочница с кодом.

А, вижу, уже сделали. Вот только ответ решением не отметили.

Answer 1

[xdevelx]

@media (max-width: 730px) {
  .team-people {
    width: 700px;
  }
}

Вот зачем 700px для мобильных?

И сразу же

.team-people {
    width: 785px;
}

И в ту же степь

.portfolio-form {
    width: 510px;
}

Если уж прям очень нужно ограничить ширину, то нужно ставить max-width и верстку не сломаешь.

Comments

[Ily4farmer]

спасибо, 2 часа не мог понять

Answer 2

[YouFire]

Потому что у тебя возможно,что то выходит за рамки,просто удаляй всё пока этого не будет,как удалишь тот div и у тебя не будет гулять,восстанавливай код и работай с поломанным div классом

Answer 3

[Olegarh1a]

Хотел помочь увидел структуру

<header class="header">
        <div class="container">
            <div class="header-block">
                <div class="header-logo">
                    <div class="header__img">
                        <img src="img/logo.png" alt="BAK-ONE">
                    </div>
                    <div class="header__text">
                        <!-- /.header__logo -->
                        <div class="header__title">BAK-ONE</div>
                        <!-- /.header__title -->
                        <div class="header__subtitle">One Page Flat Template</div>
                        <!-- /.header__subtitle -->
                    </div>
                    <!-- /.header-text -->
                </div>
                <!-- /.header-img -->

закрыл сразу

Comments

[Ily4farmer]

И что не так? Я конечн не профи, но учусь

Answer 4

[labunskyi]

если "гуляет" экран, - скорее всего у кокого-то элемента задан padding, который выталкивает его за рамки экрана.