Search code examples
javascripthtmlcssflexboxnav

How do I get my navbar to move towards the edges

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

my img is below

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

Solution 

  • 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>