스크롤바가 생기면 해더 가 밀려나는 현상 질문드립니다..

[애플애플]

페이지를 만드는 도중에 이상한 현상이 발견되서 질문드립니다

해더 안쪽에 있는 아이콘들이  스크롤바가 있는 페이지와 없는 페이지 에 따라서 위치가 오른쪽으로 조금 밀려나지는 현상입니다

스크롤바와 상관없이 헤더가 같은 위치에 고정되도록 할 수 있는 방법이 있을까요?? 

 

밑은 헤더 코드와 css입니다

-----------------------------------------------------------------------------------------

    <header  className="navber">
  <Container>
    <div className="navber_Container">
    <div className="NavbarBrand">
        <Link to="/main"></Link>
    </div>
    <div aria-controls="navbarScroll" />
    <div id="navbarScroll">
      <Nav
        className="me-auto my-2 my-lg-0"
        style={{ maxHeight: '80' }}   // instagram 로고 크기
        navbarScroll
      >

    <Form className="d-flex">
        <FormControl
          type="search"
          placeholder="검색"
          className="me-1"
          aria-label="Search"
        />
      </Form>
     
        <div className="navlink_div">
        <Nav.Link>
            <Link to="/main"></Link>
        </Nav.Link>

        <Nav.Link>
        <Link to="/main"></Link>
        </Nav.Link>

        {/* <Nav.Link>
        {modal_change_edit(true)}}/>
        </Nav.Link> */}

        <Nav.Link>
        <Link to="/main_edit_file"></Link>
        </Nav.Link>

        <Nav.Link>
        {modal_change_herat(true)}}/>
        </Nav.Link>

        <div className="navbarScrollingDropdown" onClick={()=>{modal_change(true)}}>{main_profileImage}
        </div>
        </div>
 
      </Nav>
   
    </div>
    </div>
  </Container>

</header>

-----------------------------------------------------------------------------------------------

.navber{
    height: 60px;
    width: 100%;
    border: 1px solid rgb(211, 211, 211);
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.navber_Container{
   position:relative; top:50%; left:50%; text-align:center; display: inline-flex;
}  

 

 

[codingapple]

이것만 봐서는 모르겠군요 폭이 좁아져서 아이콘크기도 약간 줄어드는 것이 아닐까요 

[글쓴이]

글