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

CSS

Posted by Jesse Thompson
Jesse Thompson
2,115 Points

Spacing issue with navigation, justify-content: space-between

Alright, so right now Im trying to use the css and php knowledge I've learned from here to create a navigation header, but there is this formatting problem I have no idea how to get around. http://imageshack.us/a/img580/4825/mi5j.jpg

I want the front blog page to look like this:

http://imageshack.us/a/img822/2977/zdkg.jpg

heres the all the css that effects formatting:

* {
box-sizing: border-box;}
body {
margin: 50px auto;
background: #000000;
font-size: 0.9em;
font-family: bebas, sans-serif;
color: #FFF;
text-transform: uppercase;} 
.nav {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-direction: row;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between; 
margin: 0 auto;
width: 50%;
list-style-type: none;
-ms-box-orient: horizontal;
-ms-box-pack: space-between;}

how do I go about fixing this issue?

3 Answers

James Barnett
James Barnett
39,199 Points

I think you are over thinking this, try this tutorial on a how to make a super simple horizontal navigation bar

Jesse Thompson
Jesse Thompson
2,115 Points

yeah I think Im over thinking this too.

Please link to the tutorial, I think you mistyped, I don't see it.

James Barnett
James Barnett
39,199 Points

Jesse Thompson - Thanks for letting me. Link is fixed now.

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

Is that all the css you have? Another thing what does the: * mean, I don't recall learning about that.

Nathan Hare
Nathan Hare
26,540 Points 
    @[Chase James](https://teamtreehouse.com/chasejames)

The * is an universal selector, affects every element on a page.

You can always refer to Selector reference from w3

Chase Lee
Chase Lee
29,275 Points

Thanks Nathan Hare!

James Barnett
James Barnett
39,199 Points

Nathan Hare - w3schools is unaffiliated with the W3C and not a good source of info for details see http://w3fools.com.

Instead use HTML Dog and Sitepoint Reference

James Barnett
James Barnett
39,199 Points 
    @Chase James - The universal selector was covered in CSS Foundations video on [basic selectors](https://teamtreehouse.com/library/websites/css-foundations-second-edition/selectors/basic-selectors) at around time index 0:35

P.S. It's covered in both the original & 2nd edition of the CSS Foundations course.

Chase Lee
Chase Lee
29,275 Points

Thanks James Barnett! Yah me and another programer thought that w3schools were affiliated with W3C until recently, that was a huge shock!

Nathan Hare
Nathan Hare
26,540 Points

James Barnett Good to know, thanks for the heads up!

Jesse Thompson
Jesse Thompson
2,115 Points
Jesse Thompson
Jesse Thompson
2,115 Points

Well this is all the css, but the css I posted previously is the only css effecting the formatting: 

@font-face{
font-family: bebas;
src: url('bebasNeue.otf');}

* {
box-sizing: border-box;}

body {
margin: 50px auto;
background: #000000;
font-size: 0.9em;
font-family: bebas, sans-serif;
color: #FFF;
text-transform: uppercase;} 

.nav {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-direction: row;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between; 
margin: 0 auto;
width: 50%;
list-style-type: none;
-ms-box-orient: horizontal;
-ms-box-pack: space-between;  }

li a {
color: #FFF;
text-decoration: none;}

li a:hover {
color: #f1dd7a;
}