При адаптивной верстке сильно большой экран!?

Question

[Артём Белых]

Здравствуйте, делаю адаптивную верстку для одного проекта, так вот уже сделал

burger menu

Но на мобилках вот такая беда:

Как видно слишком большие отступы, проверил уже всё!!! Не могу понять почему так происходит!!

Подскажите, кто знает, как это исправить?

Вот вёрстка меню:

<header class="header">
        <div class="container">
            <div class="header__body">
                <a class="header__logo">
                    <img src="<?php bloginfo('template_url'); ?>/assets/image/logo.jpg">
                </a>

            <div class="header__burger">
                <span></span>
            </div>
                <nav class="header__menu">
                    <ul class="header__list" id="header__list">
                        <?php
                        wp_nav_menu( [
                            'theme_location'  => 'top',
                            'menu'            => '',
                            'container'       => null,
                            'echo'            => true,
                            'fallback_cb'     => 'wp_page_menu',
                            'menu_class' => 'header__list',
                            'menu_id' => 'header__list'
                        ] );
                        //?>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

Вот код css(не media):

.container {
	max-width: 1180px;
	margin: 0px auto;
	padding: 0 10px;
}

.header {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 50;
}
.header:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: steelblue;
	z-index: 2;
}
.header__body {
	position: relative;
	display: flex;
	justify-content: space-between;
	height: 80px;
	align-items: center;
}
.header__logo {
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	z-index: 3;
}
.header__logo img {
	width: 70px;
	height: 70px;
	display: block;
}
.header__list {display: flex;position: relative;z-index: 2;}
.header__list li {
	list-style: none;
	margin: 0px 0px 0px 20px;
}
.header__list li a {
	color: white;
	text-transform: uppercase;
	text-decoration: none;
}
.header__burger {
	display: none;
}

А вот мой media запрос:

@media (max-width: 767px) {
    .header__burger {
        display: block;
        position: relative;
        width: 30px;
        height: 20px;
        z-index: 3;
    }
    .header__burger span {
        position: absolute;
        background: white;
        left: 0;
        width: 100%;
        height: 2px;
        top: 9px;
    }
    .header__body {
        height: 50px;
    }
    .header__logo img {
        width: 45px;
        height: 45px;
        display: block;
    }
    .header__burger:before,
    .header__burger:after {
        content: '';
        background: white;
        position: absolute;
        width: 100%;
        height: 2px;
        left: 0;
    }
    .header__burger:before {
        top: 0;
    }
    .header__burger:after {
        bottom: 0;
    }

    .header__menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: lightseagreen;
        padding: 70px 10px 20px 10px;
    }
    .header__list {
        display: block;
    }
    .header__list li {
        margin: 0px 0px 20px 0px;
    }
}

Answer 1

[alex4answ]

TL: DR;
Обычное такое происходит в следующем случае:

На странице что-то не адаптивно и "распирает" экран на максимум.
У меню абсолютное позиционированние, оно занимает 100% ширины

Comments

[Артём Белых]

То есть для меню нужно использовать vh?

[alex4answ]

Артем, нет, дело в другом, разберитесь почему у вас меню занимает 100% ширины, что на странице имеет такую ширину, лучше залейте куда-нибудь типа codepen/jsfiddle чтобы люди могли потыкать, посмотреть как на самом деле работает, я не читал и не смотрел ваши стили, но описал самую частую проблему из-за чего такое может быть.

Еще раз:
На странице есть какой-то элемент, который явно шире экрана => он распирает страницу, делая ее ширину = ему самому => у меню позиционирование абсолютное и оно растягивается не по размерам родителя, а по размерам окна или ближайшего relative

[Сергей delphinpro]

Артем, в dev tools удаляйте блоки по одному, и когда все встанет на место — исправтье верстку последнего удаленного блока.