Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by troy beckett
troy beckett
12,035 Points

centering nav......

I'm currently using media queries to center my nav when my website is seen on a tablet. Have a look at my codepen below:

http://codepen.io/tbeckett24/pen/FKeri

go down to the media query max-width:1024px as thats where my problem is. I want to make the nav fill the whole width of the screen and the centre it. I get confused all the time with the nav section. To me my website just doesn't look that centred. if possible let me know my problems and how to solve.

troy beckett
troy beckett
12,035 Points

guys all are your comments are great and they have worked, I think I really need to read up on block/inline because I feel I'm getting confused with these. So do you use the same method when trying to centre a button or is there a different way. I say this because a button isn't really an image and not just text.

Keith Kelly
Keith Kelly
21,326 Points

Troy,

Here is a good starting point to learn more about the block and inline elements CSS Layout Techniques

3 Answers

Ron McCranie
Ron McCranie
7,837 Points
Ron McCranie
Ron McCranie
7,837 Points

You want each element to take up equal amounts of room and that room to be determined by the screen size. You have 4 nav elements so I would start with making the <li> elements in the nav 25% width and adding a margin of 0 in the #nav ul li selector. Then you have to look at the #nav ul which has padding that's pushing it to the right and causing the <li> elements not to fit. Add some css to set the padding to 0 on the <ul> and you should be ok.

My version of your codepen. http://codepen.io/UncleRemus/pen/HKoqA

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

Here are a couple small changes that I made that might help:

I removed the width from the ul since you are displaying as a block it it not necessary. I aligned the text center so that it will properly center the li elements (when those elements are not floated).

#nav ul {
  display: block;
  text-align: center;
}

Instead of floating the li elements I made them inline blocks. The reason being is when you float the element it is taken from the normal flow. Inline block keeps the elements in the flow and allows me to add a text align of center to the parent. Since the elements are now centered I distributed the margin to both sides of the list item so that everything still looks centered.

#nav ul li {
  display: inline-block;
  text-align: center;
  margin: 0 4%;
}

Hope this is what you are looking for!

Alex Heil
Alex Heil
53,547 Points
Alex Heil
Alex Heil
53,547 Points

hey troy, the reason why your nav is not filling the whole width of a screen is because it's inside a container that has a width of 90%. so even with your adjustments to the grid_8 which you set to 100% in the media query this means it fills 100% of the available size (which is the 90% container again) but not the whole screen.

hope that helps ;)