如何让我的导航栏向边缘移动

Question

我只是制作一个常规导航栏，但希望徽标和链接填充整个容器而不是从 middle.I 开始，我知道这是一个简单的解决方案，但我认为唯一的方法是他们有保证金，但它也分散了我的链接

*{
    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>

如何让我的导航栏向边缘移动

How do I get my navbar to move towards the edges

html

javascript

css

nav

flexbox