How can I align logo left and navbar right in site header?

Hi all. I'm trying to create a header with the logo and nav menu inside the same DIV tag, the logo to the far left and the nav menu to the far right. I have set the "Container Width" to 1200px. I have a 200x28 pixel logo. The navbar on desktop takes about 820px. Finally, I'm using this CSS:

.site-header .inside-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

to vertically align the logo and to spread the items in the header flexbox I've created across the entire width. Except this last part, spreading the items left and right, isn't working.

When the site is displayed, the items in the header are:

• 200px wide logo
• 90px of empty space
• 820px wide navbar
• Another 90px of empty space

So in other words, the navbar is centered in the space remaining after deducting the logo width.

I just want to move the navbar all the way over to the right...what CSS do I need to do so?