How do I get my navbar to move towards the edges

Question

I'm just making a regular navbar but would like for the logo and links to fill the whole container instead of starting in the middle.I know it's an easy solution but the only way I thought would to put a margin on them but it also spreads out my links

 *{ box-sizing: border-box; margin: 0px; padding: 0px; } body{ background: pink; } nav{ display: flex; justify-content: space-around; align-items: center; min-height: 8vh; background-color: yellow; }.logo{ color: whitesmoke; text-transform:uppercase; letter-spacing: 5px; font-size: 20px; }.nav-links{ display: flex; justify-content: space-around; width: 25%; } li{ list-style-type: none; }.nav-links a{ color: black; text-decoration: none; letter-spacing: 3px; font-weight: bold; }

Answer 1

 nav { display: flex; background: tomato; padding: 1rem }.logo { margin-right: auto; }

 <nav> <a href="#" class="logo">I am the logo</a> <div> <a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> <a href="#">link 4</a> </div> </nav>