Trying to get my <ul> to fill out the bottom of my container using Flexbox

user_13641095 0
Viewed 193

Utter beginner here.

I'm trying to get my nav bar list items to spread evenly along the bottom of the nav container. I'm trying to do this specifically in flexbox. Justify-content: space-between; is what I've been trying but it doesn't seem to wanna play the game.

Code included below

Any ideas as to how I can achieve this with flexbox?

Thank you for taking the time to read this

Have a good day Johnathan

@import url('https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap');
/*font-family: 'Tenali Ramakrishna', sans-serif;*/

* { /*Hugs border to edges of screen */         
  margin: 0; 
  padding: 0; 
}



body{
  
 padding: 40px; 
 overflow-x: hidden; /* For Opera */
  
 -webkit-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
 -moz-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  box-shadow:
  inset #19d4ff 0 0 0 5px, 
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  font-family: 'Tenali Ramakrishna', sans-serif;
  text-align: center;
}

header{
 display: flex;
  /*Lovely Gold*/
}

nav{
  padding: 0; 
  background-color: #fcba03;
 
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center; 
 
 
  width: 100%; /*Nav is filling 100% of it's available container*/ 
}

#header-img{
  
}

#title{
  font-size: 42px;
}


nav ul{
   
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        justify-content: flex-start;
}

a, li {
  display: flex;
  justify-content: flex-start;
  font-family: 'Tenali Ramakrishna', sans-serif;
  font-weight: 400;
  font-size: 32px;
  text-decoration: none; 
}

/* w3 schools- https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_navbar
Parts have been edited*/

 a:hover{
  color: blue;
  transform: scale(1.1);
}


  @media screen and (max-width: 600px) {
  .nav a {
    float: none;
    width: 100%;
  }
}
  
<!doctype html>


<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>
    
<header id="header"> 

    <nav id="nav-bar">
      
        <img class="logo" src="http://pngimg.com/uploads/sun/sun_PNG13450.png" id="header-img" alt="SunLogo">
      
      <div id="title">
        <h1> Vitamin D </h1>
      </div>

      <ul>
        <li><a class="nav-link" href="#video">Video</a></li>
        <li><a class="nav-link" href="#benefits">Benefits</a></li>
        <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
        
      </ul>
    </nav> 
      
</header>

flexbox css html
4 Answers

This is because the ul generally will occupy the space based on its inner elements box size. So the maximum width of it will be the summation width of its li. To make it work you should specify its width to let it know how much space should it fill.

So just add width: 100%; to your stylesheet like this:

nav ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

Then your final code should be something like this:

@import url("https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap");

/*font-family: 'Tenali Ramakrishna', sans-serif;*/

* {
  /*Hugs border to edges of screen */
  margin: 0;
  padding: 0;
}

body {
  padding: 40px;
  overflow-x: hidden;
  /* For Opera */
  -webkit-box-shadow: inset #19d4ff 0 0 0 5px, inset #18cdf7 0 0 0 1px, inset #53dfff 0 0 0 10px, inset #50d8f7 0 0 0 11px, inset #8ce9ff 0 0 0 16px, inset #88e2f7 0 0 0 17px, inset #c5f4ff 0 0 0 22px, inset #bfecf7 0 0 0 23px;
  -moz-box-shadow: inset #19d4ff 0 0 0 5px, inset #18cdf7 0 0 0 1px, inset #53dfff 0 0 0 10px, inset #50d8f7 0 0 0 11px, inset #8ce9ff 0 0 0 16px, inset #88e2f7 0 0 0 17px, inset #c5f4ff 0 0 0 22px, inset #bfecf7 0 0 0 23px;
  box-shadow: inset #19d4ff 0 0 0 5px, inset #18cdf7 0 0 0 1px, inset #53dfff 0 0 0 10px, inset #50d8f7 0 0 0 11px, inset #8ce9ff 0 0 0 16px, inset #88e2f7 0 0 0 17px, inset #c5f4ff 0 0 0 22px, inset #bfecf7 0 0 0 23px;
  font-family: "Tenali Ramakrishna", sans-serif;
  text-align: center;
}

header {
  display: flex;
  /*Lovely Gold*/
}

nav {
  padding: 0;
  background-color: #fcba03;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  /*Nav is filling 100% of it's available container*/
}

#header-img {}

#title {
  font-size: 42px;
}

nav ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

a,
li {
  display: flex;
  justify-content: flex-start;
  font-family: "Tenali Ramakrishna", sans-serif;
  font-weight: 400;
  font-size: 32px;
  text-decoration: none;
}


/* w3 schools- https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_navbar
Parts have been edited*/

a:hover {
  color: blue;
  transform: scale(1.1);
}

@media screen and (max-width: 600px) {
  .nav a {
    float: none;
    width: 100%;
  }
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<body>

  <header id="header">

    <nav id="nav-bar">

      <img class="logo" src="http://pngimg.com/uploads/sun/sun_PNG13450.png" id="header-img" alt="SunLogo">

      <div id="title">
        <h1> Vitamin D </h1>
      </div>

      <ul>
        <li><a class="nav-link" href="#video">Video</a></li>
        <li><a class="nav-link" href="#benefits">Benefits</a></li>
        <li><a class="nav-link" href="#how-it-works">How It Works</a></li>

      </ul>
    </nav>

  </header>

user_119085020

You're almost there just need a width 100% on the ul and using space-around was the right way to go.

@import url('https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap');
/*font-family: 'Tenali Ramakrishna', sans-serif;*/

* { /*Hugs border to edges of screen */         
  margin: 0; 
  padding: 0; 
}



body{
  
 padding: 40px; 
 overflow-x: hidden; /* For Opera */
  
 -webkit-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
 -moz-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  box-shadow:
  inset #19d4ff 0 0 0 5px, 
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  font-family: 'Tenali Ramakrishna', sans-serif;
  text-align: center;
}

header{
 display: flex;
  /*Lovely Gold*/
}

nav{
  padding: 0; 
  background-color: #fcba03;
 
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center; 
 
 
  width: 100%; /*Nav is filling 100% of it's available container*/ 
}

#header-img{
  
}

#title{
  font-size: 42px;
}


nav ul{
   
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        justify-content: flex-start;
        width:100%;
        justify-content: space-around;

}

a, li {
  display: flex;
  justify-content: flex-start;
  font-family: 'Tenali Ramakrishna', sans-serif;
  font-weight: 400;
  font-size: 32px;
  text-decoration: none; 
}

/* w3 schools- https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_navbar
Parts have been edited*/

 a:hover{
  color: blue;
  transform: scale(1.1);
}


  @media screen and (max-width: 600px) {
  .nav a {
    float: none;
    width: 100%;
  }
}
  
<!doctype html>


<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>
    
<header id="header"> 

    <nav id="nav-bar">
      
        <img class="logo" src="http://pngimg.com/uploads/sun/sun_PNG13450.png" id="header-img" alt="SunLogo">
      
      <div id="title">
        <h1> Vitamin D </h1>
      </div>

      <ul>
        <li><a class="nav-link" href="#video">Video</a></li>
        <li><a class="nav-link" href="#benefits">Benefits</a></li>
        <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
        
      </ul>
    </nav> 
      
</header>

user_27225710 

@import url('https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap');
/*font-family: 'Tenali Ramakrishna', sans-serif;*/

* { /*Hugs border to edges of screen */         
  margin: 0; 
  padding: 0; 
}



body{
  
 padding: 40px; 
 overflow-x: hidden; /* For Opera */
  
 -webkit-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
 -moz-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  box-shadow:
  inset #19d4ff 0 0 0 5px, 
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  font-family: 'Tenali Ramakrishna', sans-serif;
  text-align: center;
}

header{
 display: flex;
  /*Lovely Gold*/
}

nav{
  padding: 0; 
  background-color: #fcba03;
 
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center; 
 
 
  width: 100%; /*Nav is filling 100% of it's available container*/ 
}

#header-img{
  
}

#title{
  font-size: 42px;
}


nav ul{
   
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        justify-content: space-between;
}

a, li {
  display: flex;
  justify-content: flex-start;
  font-family: 'Tenali Ramakrishna', sans-serif;
  font-weight: 400;
  font-size: 32px;
  margin-right: 10px;
  text-decoration: none; 
}

/* w3 schools- https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_navbar
Parts have been edited*/

 a:hover{
  color: blue;
  transform: scale(1.1);
}


  @media screen and (max-width: 600px) {
  .nav a {
    float: none;
    width: 100%;
  }
}
<!doctype html>


<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>
    
<header id="header"> 

    <nav id="nav-bar">
      
        <img class="logo" src="http://pngimg.com/uploads/sun/sun_PNG13450.png" id="header-img" alt="SunLogo">
      
      <div id="title">
        <h1> Vitamin D </h1>
      </div>

      <ul>
        <li><a class="nav-link" href="#video">Video</a></li>
        <li><a class="nav-link" href="#benefits">Benefits</a></li>
        <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
        
      </ul>
    </nav> 
      
</header>

nav ul {
 justify-content: space-around; // or space-between
}

a, li {
  margin-right: 10px;
}

You can add this

user_102895170

you were missing width 100% on the ul

@import url('https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap');
/*font-family: 'Tenali Ramakrishna', sans-serif;*/

* { /*Hugs border to edges of screen */         
  margin: 0; 
  padding: 0; 
}



body{
  
 padding: 40px; 
 overflow-x: hidden; /* For Opera */
  
 -webkit-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
 -moz-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  box-shadow:
  inset #19d4ff 0 0 0 5px, 
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  font-family: 'Tenali Ramakrishna', sans-serif;
  text-align: center;
}

header{
 display: flex;
  /*Lovely Gold*/
}

nav{
  padding: 0; 
  background-color: #fcba03;
 
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center; 
 
 
  width: 100%; /*Nav is filling 100% of it's available container*/ 
}

#header-img{
  
}

#title{
  font-size: 42px;
}


nav ul{
        width: 100%; /*added*/
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        justify-content: space-around;/*changed from flex-start to this*/
}

a, li {
  display: flex;
  justify-content: flex-start;
  font-family: 'Tenali Ramakrishna', sans-serif;
  font-weight: 400;
  font-size: 32px;
  text-decoration: none; 
}

/* w3 schools- https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_navbar
Parts have been edited*/

 a:hover{
  color: blue;
  transform: scale(1.1);
}


  @media screen and (max-width: 600px) {
  .nav a {
    float: none;
    width: 100%;
  }
}
<!doctype html>


<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>
    
<header id="header"> 

    <nav id="nav-bar">
      
        <img class="logo" src="http://pngimg.com/uploads/sun/sun_PNG13450.png" id="header-img" alt="SunLogo">
      
      <div id="title">
        <h1> Vitamin D </h1>
      </div>

      <ul>
        <li><a class="nav-link" href="#video">Video</a></li>
        <li><a class="nav-link" href="#benefits">Benefits</a></li>
        <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
        
      </ul>
    </nav> 
      
</header>

user_94961990
Related