Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Centering my Navigation buttons in CSS...

Hey,

I've been playing around with floats in the Workspace. Anyway, I know it's not good practice, but I'm making my bigger site first then I'm using a media query for the mobile site.

Anyway, the site over 768px looks good, but I'm having trouble with the navigation buttons inside the header on the mobile site. Specifically, I'm trying to get the buttons centered but there is always space on the left hand side, and I can't seem to get it to work, so I thought I'd ask for help.

The big page uses floats and the mobile site doesn't. The buttons are inside the header, like in the examples used in CSS Layout Techniques. Here is the code I used outside the media query…

/*******************
HEADER
*******************/
.main-header{
  background:rgba(100, 200, 255, 1);

}


/*******************
BUTTONS
*******************/

.main-nav li{
  background:rgba(100, 200, 100, 1);
  width:100px;
  float:left;
  text-align:center;
  list-style-type:none;
  padding:10px;
  border-radius:5px;

  margin-right:10px;
  margin-top:10px;
  border:1px solid black;

}

and here is the code inside the media query…

@media screen and (max-width:768px){

  .main-logo{
    float:none;
    width:100%;
    height:100%;
    box-sizing:border-box;
    border-radius:0;

  }

  .main-nav li{
    float:none;
    width:100%;
    margin-right:0;
    margin-left:0;
    box-sizing:border-box;

  }

If anyone can help, I would greatly appreciate it. Thanks.

Oops, trying to put a screen shot of the webpage...

2 Answers

Maria Victoria Reyes
Maria Victoria Reyes
17,731 Points

hi Robin, played with your code, I don't know if this is what you actually need. http://jsfiddle.net/Bekong/6H2pr/3/ hope it helps though. :-)

Hi Maria, thanks for trying, but it doesn't work.