Making navbar fixed extends it s width – CSS

I created a navbar for a web application with React. First I designed a card element in order to define the site content and in this card I added a custom navbar, but when I set the position of navbar to "fixed" it extends the width of navbar and I don’t know what is the cause. Down you can find the react code:

REACT CODE:

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 default NavigationBar;

STYLED COMPONENTS:

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;

`