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 CSS Layout Basics CSS Layout Project Column Layout with Media Queries

Posted by Rimvydas Šidlauskas
Rimvydas Šidlauskas
2,886 Points

Could someone help me, I can't get main-nav centered.

Hello.

I think I followed the instructions, but I did something wrong and I cant get main-nav part centered.

https://w.trhou.se/r874y7i47v (my bad, made it to Snapshot)

Thank you.

1 Answer

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

The media queries float the nav to the right at screen sizes of 769 pixels or more.

The nav is centered on screens with widths smaller than that. That part seems to be working as designed, though you might want to eliminate the bullets:

.main-nav {
  list-style: none;
}
Rimvydas Šidlauskas
Rimvydas Šidlauskas
2,886 Points

Oh, I formulated my questiong in the wrong way, sorry for my english.

What I meant was how should I center main-nav in media query (min-769px), because it appears at the top. https://imgur.com/a/63eWc

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

There's a few ways to handle this, one of them is with margins. Since the nav items also seemed a bit crammed together, I added this to the 769 pixel media query:

  .main-nav a {
    margin: 17px 8px;
  }
Rimvydas Šidlauskas
Rimvydas Šidlauskas
2,886 Points

I tried to figure it out for so long. Thank you.