"Почему мой реагийный навигация шире, чем просмотр, вызывает горизонтальный свиток?" ⇐ Html

[Anonymous]

"Я строю приложение React, которое включает в себя компонент Navbar. Навие, кажется, выходит за рамки ширины экрана, вызывая горизонтальный свиток (ось X). Я пытался применить исправления CSS, но ничего не сработало. Однако, когда я воссоздал склад в простой HTML и CSS без React, не ожидал, что не ожидал, что не ожидал, что не ожидал, что не ожидал, что это не так, как не было, как не ожидалось, что не было, как не было, как не было, но не ожидалось, что не так, как и в этом, не было, но не ожидалось, что это не так, как и в этом, но не ожидалось, что не так, как это было, но не ожидалось. Html/css? »
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";
import { FaBars } from "react-icons/fa";
import { useEffect, useState } from "react";

import "./Navbar.css";
const Navbar = () => {
const [hover, setHover] = useState(false);

const setHoverFunction = () => {
setHover(true);
console.log(hover);
};
const setHoverFunctionOut = () => {
setHover(false);
console.log(hover);
};

useEffect(() => {
document.querySelector(".DropdowN").classList.toggle("show");
}, [hover]);

const handleList = () => {
document.querySelector(".Navbar_links").classList.toggle("show");
};
return (




SHOP-PAKK

• Home
• About
• className="item-down"
  onMouseEnter={setHoverFunction}
  onMouseLeave={setHoverFunctionOut}
  >
  Services
  
  
  Web Development
• Mobile Development
• Desktop Apps
• Embedded System
• Cyper Secuirity

[*]
Contact

[*]
Blog




);
};
< /code>
экспорт по умолчанию Navbar; < /p>
и CSS -код < /p>
*,
*::before,
*::after{

margin: 0;
padding: 0;
box-sizing: border-box;

}
ul{
padding: 0;
margin: 0;
}
html, body, #root {
/* width: 100%; */
/* height: 100%; */
/* position: fixed; */
/* left: 0px; */
/* top: 0px; */

margin: 0;
padding: 0 ;
/* max-width: none; */
}
/* nav{
width: 100%;
height: 100px;
background-color: #252525;
position: relative;
} */
.Navbar_i {
/* width: 100% ; */
height: 100px;
background-color: #252525;
/* position: fixed; */
top: 10px;
left: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
}

.Navbar_logo{

font-size: 35px;
font-weight: 600;
color: #e6e6e6;
/* margin-left: 100px; */
}
.Navbar_links{

height: 100%;
list-style: none;

/* margin: 0 20px; */
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.Navbar_links li{

list-style: none;
height: 100%;
display: flex;
align-items: center;

}

.Navbar_links li a{
text-decoration: none;
color: #e6e6e6;
font-size: 24px;
font-weight: 500;

height: 100%;
display: flex;
align-items: center;
}

.Navbar_links li a:hover{
color: #c15c35;
transition: 0.3s;
}
.item-down{

position: relative;

}
.DropdowN{
background-color: transparent;
width: 250px;
position: absolute;
top: 100px;
right: -50px;
margin: 0;

height: auto;
/* border: 1px solid #c15c35; */

display: none;

}
.show{
display: flex;
flex-direction: column;
justify-content: center;
z-index: 1;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease-in-out;
}
.DropdowN li{
display: block;
width: 100%;

}
.DropdowN li a{
color: rgba(255, 255, 255, 0.75);
padding: 4px 10px;
border-bottom: #c15c35 solid 1px;
width: 100%;
background-color: transparent;
}
.DropdowN li a:hover{
color: #c15c35;
background-color: #252525;
transition: 0.3s;

}

.nav-toggle{
display: none;
}

/* @media screen and (max-width: 768px) {
.nav-toggle{
background-color: transparent;
font-size: 40px;
border: none;
color: #e6e6e6;
display: block;
}
.nav-toggle:hover{
color: #c15c35;
transition: 0.8s;
transform: rotate(90deg);
}
.Navbar_links{
display: none ;
}
.Navbar_i{
display: block;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.nav-header{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
/* padding: 0 20px; */
/* } */
/*
.show{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* top: 100px; */
/* left: 0; */
/* width: 100%;
height: 400px;
background-color: #252525;
padding: 20px 0;

} */
/* .show li{
width: 100%;
text-align: center;

background-color: tomato;
}
.DropdowN{
display: none;
}} */


Подробнее здесь: https://stackoverflow.com/questions/796 ... tal-scroll