Applying margin moves flex-end item out of screen

Question

I'm creating a horizontal navbar that sits on the right of the sidebar, but then trying to apply flex-end to items inside of it (search component in this example), will cause them to disappear out of the viewport:

<div className={classes.navbarContainer} id="navbarColor">
  <div className={classes.navbar}>
    <Search />
  </div>
</div>

.navbarContainer {
    height: 80px;
    position: fixed;
    left: 250px;
    width: 100%;
}

.navbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 250px; // This works but feels hackish
}

Is there a better elegant way to do this, so that the horizontal navbar starts a bit to the right, but items in it can be put in the end (far right) of the page, without using absolute positioning?