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 ryanosten
.a{fill-rule:evenodd;}techdegree
ryanosten
PHP Development Techdegree Student 29,615 Points

How to push nav list items to right side of main header container?

On non-mobile screen sizes, within the main-header, I am trying to display the <h1 class="name"> on the left side of main-header and the <ul class="main-nav"> on the right side of the main-header. I know that I can use margin-right property on the name class to push the nav to the right, but when I use absolute units it doesn't adjust to screen size, and using relative units causes the main-nav to wrap onto next line sometimes. How can I lock the main-nav to the right side of container?

Here is my relevant CSS:

''' .name, .main-nav li { text-align: center; }

/* ================================= Media Queries ==================================== */

@media (min-width: 769px) {

/-- main nav --/

.name, .main-nav, .main-nav li{ display: inline-block; }

.main-header { margin-left: 25px; margin-right 25px; }

.name { text-align: left; }

.main-nav li { text-align: right; } '''

ryanosten
.a{fill-rule:evenodd;}techdegree
ryanosten
PHP Development Techdegree Student 29,615 Points

I sort of solved by floating right then adding margin to right and top of the ul element, but seems like a hack.

3 Answers

Sergio Alen
Sergio Alen
26,726 Points
Sergio Alen
Sergio Alen
26,726 Points

"I sort of solved by floating right then adding margin to right and top of the ul element, but seems like a hack."

It's not a hack, that's how you do it :)

Emmanuel Plouvier
Emmanuel Plouvier
11,919 Points
Emmanuel Plouvier
Emmanuel Plouvier
11,919 Points

Hi,

If you want, you can make a Codepen and share it :)

Max Kutner
Max Kutner
7,595 Points
Max Kutner
Max Kutner
7,595 Points

Hi,

I'd simply add more media querries as needed. How many and at what points exactly is totally under your discretion. When you mention 'locking' something in a spot, I think you'll need to use absolute units for positioning and adjusting the font/character size with the querries as needed.

Hope this helps!

Max