Почему гамбургер-меню не прячется, а удлиняет header?

Question

[Norum]

При разрешении экрана 1300px у меня появляется бургер для вызова адаптивного меню, но оно почему-то не прячется, а удлиняет страницу, создавая скролл по горизонтали. Я прописал свойство transform: translateX(100%) для .menu-open, чтобы его не было видно и лишь при нажатии на hamburger_wrapper оно появлялось путем добавления класса .menu-open-active со свойством transform: translateX(0%). Но почему-то меню ведет выходит за пределы и ведет себя неадекватно. В чем проблема?

<header>
        <div class="wrapper">
            <div class="content">
                <a href="#" class="logo">
                    Inter-Web
                </a>
                <nav class="menu">
                    <ul>
                        <li><a href="#">Главная</a>
                            <ul class="sub_menu">
                                <li><a href="#">Брендинг</a></li>
                                <li><a href="#">Вэб-разработка</a></li>
                                <li><a href="#">Медиа-маркетинг</a></li>
                                <li><a href="#">Комплексное<br>продвижение</a></li>
                            </ul>
                        </li>
                        <li><a href="#">О нас</a></li>
                        <li><a href="#">Услуги</a>
                        <li><a href="#">Порядок работы</a></li>
                        <li><a href="#">Этапы работы</a></li>
                        <li><a href="#">Портфолио</a></li>
                        <li><a href="#">Новости</a></li>
                        <li><a href="#">Конакты</a></li>
                    </ul>
                </nav>
                <div class="contacts">
                    <div class="phone-block">
                        <a class="number" href="tel:[phone]">8 800-556-98-74</a>
                        <button class="request open-popup">Заказать звонок</button>
                    </div>
                    <div class="social-block">
                        <i class="fab fa-viber"></i>
                        <i class="fab fa-telegram-plane"></i>
                        <i class="fab fa-whatsapp"></i>
                    </div>
                </div>
                <div class="hamburger_wrapper">
                    <div class="hamburger hamburger--spin">
                        <div class="hamburger-box">
                            <div class="hamburger-inner"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="menu-open">
        <ul>
            <li><a href="#">Главная</a>1</li>
            <li><a href="#">О нас</a>2</li>
            <li><a href="#">Услуги</a>3</li>
            <li><a href="#">Порядок работы</a>4</li>
            <li><a href="#">Этапы работы</a>5</li>
            <li><a href="#">Портфолио</a>6</li>
            <li><a href="#">Новости</a>7</li>
            <li><a href="#">Конакты</a>8</li>
        </ul>
    </div>

@media screen and (max-width: 1300px) {
	.bg_show {
		display:  block;
	}

	.menu {
			display: none;
		}

		.request {
			display: none;
		}

		.contacts {
			flex-direction:  column;
		}

		.contacts a.number {
		  margin-right: 0;
		  font-size: 12px
		}

		.fab.fa-viber {
			margin-left: 0;
		}

		.menu-open {
			display: block !important;
			position: absolute !important;
			background: url(../img/menu-bg.jpg) center no-repeat;
			background-size: cover;
			right:  0;
			top: 0;
			width: 300px;
			height: 100%;
			transform: translateX(100%);
			transition: 0.3s;
			padding:  0 60px 0 30px;
		}

		.menu-open-active {
			transform: translateX(0%);
		}

		.menu-open ul {
			display:  flex;
			flex-direction:  column;
			justify-content: center;
			align-content: space-between;
			height:  100%;
			width: 100%;
		}

		.menu-open ul li  {
			display:  flex;
			justify-content: space-between;
			margin-bottom: 30px
		}

		.hamburger_wrapper {
		  display: inline-block;
		  z-index: 999 !important;
		}

		.main .content {
	    padding-left: 0;
		}
}

Сайт ilyin1ib.beget.tech

весь код https://jsfiddle.net/qe3j2fxu/