Горизонтальный скролл в адаптивном виде у простой страницы

Question

Верстаю себе страничку (https://munister-v.github.io/), в адаптивном мобильном виде есть одна проблема, которую не могу решить. Скролл горизонтальный присутствует по странице, хотя его не должно было быть. Медиа-запрос есть, но что-то не получается. В чем проблема, подскажите пожалуйста.

Стили: munister-v.github.io/style.css

<html lang="ru">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" type="image/x-icon" href="https://github.githubassets.com/favicons/favicon.svg">
    <title>Munister</title>
    <link rel="stylesheet" href="/munister-v.github.io/style.css">




</head>

<body translate="no">
    <nav>
        <div class="container">
            <div class="grid">
                <div class="column-xs-12 column-md-8">
                    <p id="logo">
                        <span class="blick">GLUCKSRITTER MUNISTER</span>
                    </p>
                </div>
                <div class="column-xs-12 column-md-4">
                    <ul>
                        <li><a href="https://munister-v.github.io/me.html" class="menu1">Обо мне</a></li>
                        <li><a href="https://munister-v.github.io/books.html" class="menu2">КНИГИ</a></li>
                        <li><a href="https://t.me/vyanetto" class="menu3">Связь</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <main class="about">
        <div class="container">
            <section class="grid info">
                <div class="column-xs-12 column-md-1">
                    <div class="about">
                        <h1 class="section-heading">About Me</h1>
                    </div>
                </div>
                <div class="column-xs-12 column-md-4">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Al_khazneh.jpg/1280px-Al_khazneh.jpg">
                </div>
                <div class="column-xs-12 column-md-7">
                    <div class="intro">
                        <h2>Вячеслав Денисович Мунистер — автор учебной и художественной литературы</h2>
                        <p>Сфера интересов: средства идентификации, измерения, передачи и обработки в IoT, IoE, аспекты и проблемы интеграции микропроцессорных систем в рамках концепции "окружающего интеллекта" (Ambient intelligence), компьютерное зрение
                            (Computer Vision), повсеместные вычисления и межмашинное взаимодействие в геоинформационных системах, контекстно-зависимые пользовательские интерфейсы.</p>
                        <p>В круг внимания входит изучение инструментов экономического планирования, градостроительства и урбанистики, экспертных систем, логистики, теории экономических механизмов, отношенческой контракции, генеративно-состязательных сетей
                            и эргодичности в экономической теории, политико-правового обеспечения национальной безопасности.
                        </p>

                    </div>
                </div>
                <div class="column-xs-12 column-md-7">

                </div>

            </section>
        </div>
    </main>
    <footer>
        <div class="container">
            <section class="grid">
                <div class="column-xs-12">
                    <p class="copyright">© Copyright 2020 Munister</p>
                </div>
            </section>
        </div>
    </footer>


</body>


<script>
    if (document.location.search.match(/type=embed/gi)) {
        window.parent.postMessage("resize", "*");
    }
</script>


</html>

Answer 1

У Вас в меню какой-то скрипт/плагин подключен - он и создаёт горизонтальный скролл (причём динамический и хитро стилизованный). Задайте для nav свойство overflow: hidden - должно помочь.

БЛОГ НА HUSL

Горизонтальный скролл в адаптивном виде у простой страницы

Ответы (1 шт):