导航栏容器未使用全长

如何解决导航栏容器未使用全长

我一直在学习使用 React 创建 Web 应用程序的教程，但是在创建导航栏时，由于某种原因，容器没有使用全长...我尝试了几件事，但似乎找不到正确的解决方案。

这是导航栏和容器的 css：

.navbar {
    background: linear-gradient(90deg,rgb(28,27,27) 0%,rgb(26,23,23) 100%);
    height: 80px;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 999;
  }
  
  .navbar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    width: 100%;
  }

这是我无法弄清楚的容器周围的盒子：

欢迎任何帮助，css显然不是我的强项...

import React,{ useState } from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';
import { Button } from './Button.js';

function Navbar() {
    const [click,setClick] = useState(false);
    const [button,setButton] = useState(true);

    const handleClick = () => setClick(!click);
    const closeMobileMenu = () => setClick(false);
    const showButton = () => {
        if (window.innerWidth <= 960) {
            setButton(true);
        } else {
            setButton(false);
        }
        };

    window.addEventListener('resize',showButton);

    return (
        <>
            <nav className="navbar">
                <div className="navbar-container">
                    <Link to="/" className="navbar-logo">
                        ZYGO <i class="fas fa-dice-d20"></i>
                    </Link>
                    <div className='menu-icon' onClick={handleClick}> 
                        <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
                    </div>
                    <ul className={click ? 'nav-menu active' : 'nav-menu'}>
                    <li className='nav-item'>
                            <Link to='/' className='nav-links' onClick={closeMobileMenu}>
                                Home
                            </Link>
                        </li>
                        <li className='nav-item'>
                            <Link to='/simulations' className='nav-links' onClick={closeMobileMenu}>
                                Simulations
                            </Link>
                        </li>
                        <li className='nav-item'>
                            <Link to='/about' className='nav-links' onClick={closeMobileMenu}>
                                About
                            </Link>
                        </li>
                        {/* <li className='nav-item'>
                            <Link to='/sign-up' className='nav-links' onClick={closeMobileMenu}>
                                Sign Up
                            </Link>
                        </li> */}
                    </ul>
                    {/* {button && <Button buttonStyle='btn--outline'>ABOUT</Button>} */}
                </div>
            </nav>
        </>
    );
}

export default Navbar

解决方法

出于某种原因，您将 navbar 设置在 navbar-container 之外？这两个可以换吗？我猜容器应该包含在该类上设置的导航栏和 css，其宽度设置为 100%。

但是由于导航栏没有设置宽度，所以它只会占用它需要的空间。