固定导航条可以扩展它的宽度

Question

我用React创建了一个web应用程序的导航栏。首先，我设计了一个卡片元素来定义网站内容，在这张卡片中我添加了一个自定义导航条，但是当我将导航条的位置设置为"固定"时。它扩展了导航条的宽度，我不知道是什么原因。下面你可以找到react代码:

反应代码:

logo from './Resources/Logo.png'
import {Container,Logo, 
NavButton,ProductsButton,ShopingCart,CartButton,HelpButton,HelpIco,UserIcon} from './StyledComponents'
import DropDownMenu from '../Dropdown/DropMenuContainer'
import { useState } from 'react'
import SearchBar from '../SearchBar'
import { DropDownMenuData } from '../../Database/DummyDatabase'
import { DetailsIcon } from './StyledComponents'
import ShopingCartList from '../ShopingCart'
import { MenuIcon } from './StyledComponents'
const NavigationBar = () =>{
const [showDropDown, setShowDropDown] = useState(false)
const [showShopingCart, setShowShopingCart] = useState(false)
const onShopingCartButtonClick = () => showShopingCart===true ? setShowShopingCart(false) : setShowShopingCart(true);
const onClick = () => showDropDown===true ? setShowDropDown(false) : setShowDropDown(true);
return(
<Container>
<Logo src={logo}></Logo>
{showDropDown ? <DropDownMenu items={DropDownMenuData}/> : null}
{showShopingCart ? <ShopingCartList/>:null}
<ProductsButton onClick={onClick}> <MenuIcon></MenuIcon>PRODUSE</ProductsButton>  
<SearchBar></SearchBar>  
<CartButton onClick={onShopingCartButtonClick}> <ShopingCart></ShopingCart> </CartButton>
<HelpButton><HelpIco></HelpIco></HelpButton>
<NavButton> <DetailsIcon></DetailsIcon>DETALII</NavButton>
<NavButton> <UserIcon></UserIcon>LOGIN</NavButton>
</Container>
)
}

风格的组件:

export const Container = styled.div`
top: 0;
width: 100%;
overflow: hidden;
transition:1s;
height: 3rem;
width:100%;
background-color: rgb(255, 255, 255);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
flex-direction:row;
text-align:center;
z-index:5;

Answer 1

我试着从" fixed ";";sticky"它成功了

Answer 2

尝试将position: relative添加到导航栏的父元素