Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Jonatan Spahn
Jonatan Spahn
6,362 Points

Trying to make a simple navigation

Here is my code on codepen,

http://codepen.io/JohnSpahn/pen/bZQXmR

How do I get the background color (light blue) to fill in the space between each listed element. If i code it in the nav it goes across the screen. I tried putting it in a div, but that still gives me the blue all the way across the screen.

Thanks!

6 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hi Jonatan Spahn,

Check out this video I recored a while back that covers helpful tips for aligning navigation items and centering your nav. Hope this helps. :)

Konrad Pilch
Konrad Pilch
2,435 Points

:D Amazing. Thank you, even though the question was from Jonatan, I was really thinking what's the best for this.

Konrad Pilch
Konrad Pilch
2,435 Points

It's great to refresh the mind doing some basic stuff.

Konrad Pilch
Konrad Pilch
2,435 Points

Heh, I don't know if this is the best, but i just put it with margin, hide it with it.

body{
  margin:0;
  padding:0;
}
nav {
  max-width: 100%;
  text-align: center;
}
nav ul{
  margin:0;
  padding:0;
}
nav a {  
  text-decoration: none;
  color: black;
  padding: 5px;
  font-size: 1.5em;
  background: lightblue;
  margin-left:-4px; /* margin */
}

nav li {
  list-style-type: none;
  display: inline;

}

I don't know if this is the way it's done, or im missing something, i had a break for 2months, and i didnt code pure html and css for a long time lol can't think possibly why these spaces show there, maybe it's default or soemthing, not even with inspect tools coudn't see whats wrong with it.

Jessica Murillo
Jessica Murillo
9,119 Points

I did this if you like it. I don't know if this is exactly what you wanted.

nav {
  max-width: 16%;  /*changed from 100%*/
  text-align: center;
  margin: auto;  /*gave it an auto margin*/
  background: lightblue;
}

nav ul{
  margin: 0;
  padding: 0;
}

nav a {  
  text-decoration: none;
  color: black;
  font-size: 1.5em;
  background: lightblue;
}

nav li {
  list-style-type: none;
  display: inline;
}
Konrad Pilch
Konrad Pilch
2,435 Points

This basically makes the element nav of a width 20%, and now you are aligning the margin, so the width 20% , is now in the center. I suppose.

And hehe, two different people, two different solutions :D

Jessica Murillo
Jessica Murillo
9,119 Points

Yeah lol this is fun. i like to see other people's solutions as well!

Konrad Pilch
Konrad Pilch
2,435 Points

One zero is enough xD

 margin: 0 0 0 0;
Konrad Pilch
Konrad Pilch
2,435 Points

I wonder what Guil would do.

Jessica Murillo
Jessica Murillo
9,119 Points

You're right! duh hehe. Thank you! I updated it.

Konrad Pilch
Konrad Pilch
2,435 Points

Hey Jessica Murillo , could I as you a question in terms of your journey etc? if you have tiime? If you could contact me here so we don't make a spam. If you got time, and want, and if you do send the email, pelase tell me here, just to be sure.

Jonatan Spahn
Jonatan Spahn
6,362 Points

Hey thank you for some of the solutions, can't play around right now because I'm at work, but thanks again!

Jessica Murillo
Jessica Murillo
9,119 Points

Yes, thank you! I see how my code would not work by adding a navigation item it would not really be inline anymore because of the fixed width that I added. Awesome!

Jonatan Spahn
Jonatan Spahn
6,362 Points

I can't seem to take off the space between on the bottom in my gallery between my img and the border. Does someone know how ?

http://codepen.io/JohnSpahn/pen/bZQXmR