How do i horizontally align the nav-right bar within the nav bar?

1

Hi i want to centre the green box horizontally within the purple box. How do i do this? thanks

<style>
  #header {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  #nav-bar {
    position: fixed;
    top: 0px;
    width: 100%;
    background: royalblue;
  }

  #logo {
    height: 100px;
    width: 100px;
  }

  .nav-right {
    float: right;
    margin: auto;
    background: chartreuse;
    text-align: center;
    align-items: center;
  }

  ul {
    width: 35vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    text-align: center;
  }

  li {
    list-style: none;
  }
</style>

<html>
  <header id="header">
    <nav id="nav-bar">
      <img id="logo" src="mcdonalds.png" />
      <div class="nav-right">
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 1</a></li>
        </ul>
      </div>
    </nav>
  </header>
  <div>
    <iframe
      width="420"
      height="315"
      src="https://www.youtube.com/embed/tgbNymZ7vqY"
    >
    </iframe>
  </div>
  <form id="form">
    <input id="email" placeholder="Enter email here" type="email" />
    <button type="submit" href="https://www.freecodecamp.com/email-submit">
      Sign up
    </button>
  </form>
</html>

image
image1366×768 142 KB

2

To easily align items in the center, you have two options, one using absolute positioning or flexbox. The easiest out of the two would be using flex box.

The solution for flexbox would be to make your nav-bar a display of flex, and then perhaps give your ul a class, and then that ul element will have a property of align-self to center.

.nav-bar {
   display: flex
   position: fixed;
   top: 0px;
   width: 100%;
   background: royalblue;
}

.nav-list // This is the classname I gave to your ul element {
 align-self: center
}

If you want to approach it the other way, is give your ul element a position of absolute, and a left property to 50%.

.nav-list {
 position: absolute;
 left: 50%;
}