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
robinbehroozi
15,912 PointsCentering 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.
2 Answers

Maria Victoria Reyes
17,731 Pointshi 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. :-)
robinbehroozi
15,912 PointsHi Maria, thanks for trying, but it doesn't work.
robinbehroozi
15,912 Pointsrobinbehroozi
15,912 PointsOops, trying to put a screen shot of the webpage...