导航栏：左右对齐内联文本

Question

Basically, I want "Name" to go to the left of the nav-bar, while "About" "Contact" and "Account" remain on the right of the nav-bar.

https://jsfiddle.net/etw2q6sL/1/

.name {
  font-family: "ChunkFive"; /* works */
  font-size: 22px;          /* works */
  color: #32B432;           /* doesn't */
  text-align: left;         /* doesn't */
}

I used , within a , within a , within a .

I don't know which parent or child styles to change. (I wanted to change the color of "Name" to green too but it wasn't working either).

Answer 1

Here's an update to your Fiddle that should do what you want: https://jsfiddle.net/etw2q6sL/4/

The colour rule not working is because your other rule #mainNav a specifies a colour for all the links in the nav, and this is more specific than your .name rule, so the browser chooses the colour from the former. To make this work as you want, I would make the .name rule more specific by adding extra conditions to its selector - eg change it to #mainNav .name a . To learn more about CSS specificity (the order in which rules are applied) check this out: https://css-tricks.com/specifics-on-css-specificity/

On the alignment issue, you're confusing text alignment with placement of your list items. text-align: left will simply take align any inline content (such as text, spans, etc.) and align it to the left in the current list item - it won't align the list item to the left in the nav.

Instead what you want for this is a float . What I've done is separate out your list into two separate uls, one which has a float: left applied and the other a float: right . These floats pull the two lists to the left and right side of the nav. This article may help you learn about using floats with a navbar like you're making: http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/