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 Lindsay Barrett
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points

navigation not moving

I am trying to move my "main-nav" element to the right of my header/container element. The "main-nav" class is not moving to the right of its container, even though I have put an 0px right-margin.

How can I move the navigation bar to the right of the screen without using a float property? Thank you!

here is my code: https://w.trhou.se/zcza3iguz8

Lindsay Barrett
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points

@austin Whipple thanks! I have decided to go with floats, but when I float the name class to the right and the main nav to the left. They appear to be on separate lines.

The main nav element looks like it is above on the right side.

Austin Whipple
Austin Whipple
29,847 Points

Lindsay Barrett, if you do decide to go with floats, you'll need to adjust the margins of the elements to make them line up properly. I just realized you could also use absolute positioning on the navigation container to move it around, so I've amended my answer below to talk a bit about that as well.

1 Answer

Austin Whipple
Austin Whipple
29,847 Points
Austin Whipple
Austin Whipple
29,847 Points

I think this might be tricky to do without using floats, but probably not impossible.

Because the .main-nav is an inline-block element, it'll want to stay to the left if it can. You can make inline-block elements move to the right by adding a "text-align:right;" to the parent element (.container in this case). However, when you do that, all child elements of .container will be affected (like h1.name).

If you turn .main-nav into a block element, it'll break to a new line and require a float to move to the right.

What you could also do is give .main-nav a width that fills all of the space left over after your h1.name element (so assign a width of 25% to one and 75% to the other, for instance). Then if you put text-align: right; on .main-nav, all of the list items will move to the right side of the page.

Another option would be absolutely positioning .main-nav with:

.main-nav {
    display: inline-block;
    margin-right: 0px;
    position: absolute;
    right: 0;
    top: 23px;
}

If you use that, you'll need to apply "position: relative;" to .container to make sure the navigation is positioned relative to its containing div rather than the browser window. More on that here.

Those last two can get a little annoying with a responsive website, but might be the best options at the moment for perfect browser compatibility.

On that note, the new flexbox options in CSS are great (but not quite perfect as far as browser support goes). Check that out on CSS Tricks and/or Treehouse.