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 Techniques Float Layout Floating Columns and Images

Posted by robinbehroozi
robinbehroozi
15,912 Points

Centering content...

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 what my CSS looks like. 

/*******************
WRAPPER
*******************/

.wrapper{
  width:95%;
  margin:0 auto;

}

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

}

/*******************
LOGO
*******************/

.main-logo{
  background:rgba(100, 200, 100, 1);
  width:100px;
  text-align:center;
  float:left;
  margin-top:0;
  margin-right:10px;
  padding:20px;
  border-radius:5px;
  border:1px solid black;

}

/*******************
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;

}

/*******************
BLOCKS OF CONTENT
*******************/

.secondary-content{
  background:rgba(200, 100, 160, 1);
  color:white;
  height:100%;



}

.main-banner{
  background:rgba(170, 170, 170, 1);
  padding:20px;
  color:white;


}

.extra-content{
  background:rgba(160, 200, 100, 1);
  color:white;
  height:100%;

}
.main-footer{
  background:rgba(100, 100, 100, 1);
  color:white;
  padding:20px;
  box-sizing:border-box;


}

/*******************
CLEARFIX
*******************/

br{
clear:both;

}

.col{
  float:left;
  width:30%;
  padding:20px;
  box-sizing:border-box;



}

.primary-content{
  background:rgba(60, 100, 160, 1);
  color:white;
  width:40%;
  height:100%;


}

/*******************
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;


  }

  .main-nav{

    text-align:center;


  }

  .wrapper{
    width:100%;

  }
  .hide-mobile{
  display:none;

}
  .col{
    float:none;
    width:100%
  }

}

Any help would be greatly appreciated. Thanks.

2 Answers

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

Lists have padding built in, so you may be seeing the padding that your ul or ol are adding. You can fix this by setting the ul's padding to 0.

robinbehroozi
robinbehroozi
15,912 Points
robinbehroozi
robinbehroozi
15,912 Points

Yup, that's it. Thanks Adam!