Мой раскрывающийся список занимает 100vw, но создает горизонтальное переполнение в правой части окна. ⇐ CSS

[Anonymous]

Я разрабатываю собственную панель навигации. Меню открывается некорректно. У него 100vw, но переход к правой стороне окна создает горизонтальную прокрутку. У меня есть 2 компонента Navbar и Menu. Компонент меню вызывается внутри Navbar.
Это снимок экрана моего экрана.


Я думаю, проблема в CSS родительского компонента. Пожалуйста, помогите мне.
Компонент Navbar

Код: Выделить всё

import React, { useState } from "react"
import Logo from "../../assets/images/logo.png"
import LogoHover from "../../assets/images/logo-hover.png"
import styles from "./Navbar.module.css"
import { FaCaretDown, FaCaretUp, FaSearch, FaGlobe } from "react-icons/fa"
import Menu from "../menu/Menu"

const Navbar = () => {
const [logoHover, setLogoHover] = useState(false)

return (


[img]{!logoHover ? Logo : LogoHover}
/>



What we do

sasads
paragraph
paragraph
paragraph
paragraph
paragraph
paragraph
paragraph
paragraph
paragraph
paragraph




What we do


What we think

Who we are


Careers








UAE





)
}

export default Navbar

Код: Выделить всё

nav {
background: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: space-around;
height: 70px;
width: 100%;
font-size: 14px;
}

.main_links {
display: flex;
gap: 20px;
width: 50%;
cursor: pointer;
}

.link {
display: flex;
gap: 2px;
align-items: center;
}

.link:hover {
color: #a2a2a0;
}

.country_select {
display: flex;
gap: 25px;
}

.logo_container {
width: 20%;
.logo {
transition: transform 1s ease;
}
}

.logo:hover {
transition: transform 2s ease;
transform: scale(1.1);
}

Компонент меню

Код: Выделить всё

import React, { useState } from "react"
import styles from "./Menu.module.css"
import { FaCaretDown, FaCaretUp } from "react-icons/fa"

const Menu = ({ title, children }) => {
const [dropdownVisible, setDropdownVisible] = useState(false)

const toggleDropdown = () => {
setDropdownVisible(!dropdownVisible)
}

return (


{title}
{dropdownVisible ?  : }

{children}


)
}

export default Menu

Код: Выделить всё

.menu {
position: relative;
}

.link {
cursor: pointer;
display: flex;
align-items: center;
padding: 10px;
}

.dropdown {
position: absolute;
top: 100%;
left: 0;
width: 100vw;
height: 100vh;
background-color: #202020;
transition: max-height 0.3s ease;
overflow: hidden !important;
max-height: 0;
}

.dropdown_content {
padding: 10px;
}

.open {
max-height: 85vh;
}

Подробнее здесь: https://stackoverflow.com/questions/784 ... -side-of-w