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 erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Wrapper centering problem!

Heres a picture of the problem http://imgur.com/Qwi0V6l

as you can see the left side has larger width than the right side,

i tried fixing it with text-align: center; but it does not work,

My site has a fixed layout!

heres the css 

html, body {
    margin: 0;
    padding: 0;
}

html,
body,
.main-wrapper {
    min-height: 100%;
}

body {
    background: url('../img/background.jpg');
    font-family: 'Oswald', sans-serif;
    color: #fff;
    margin: 0;
}

header {
  background-color:black;
  padding: 40px;
  margin-bottom: 200px;
  max-height: 100%;  
}

header {
    border-bottom: 5px solid white;
}

.main-logo {
        width: 400px;
}

.main-wrapper {
    text-align: center;
    min-width: 1460px;
    min-height: 100%;
    margin: 0 auto;
    padding-left: 75px;
    padding-right: 75px;
}



.first-content img{
   width: 200px;
   height: 200px;
   border: 5px solid white;
   border-radius: 10px;
   border-
}

.first-content a:hover {
   opacity: .7;
}

.first-content li {
    float: left;
    width: 200px;
}

.first-content ul li{
    margin: 40px;
    list-style: none;
}

.first-content {
    text-align: center !important;
}

.first-content ul li p {
    letter-spacing: 3px;
    font-size: 30px;
    font-family: 'Exo 2', sans-serif;
}


.second-content p{
   color: #FFF;
}

.second-content {
    clear:both;
    width: 50%;
    text-align: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid white;
    border-radius: 40px;
    margin-top: -80px;
    overflow: visible;
}



footer {
    clear:both;
    text-align: center;
    font-size: 20px;
    color: #FF6600;
    font-weight: 900;
}

footer {
    border-top: 1px solid white;
}







/***BUTTON FOR SECOND CONTENT****/


.button {
    position: relative;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5px;
    border: 2px solid black;
    border-radius: 20px;
    background-color: #FF6600;
    text-align: center;
    margin-bottom: 2px;
    top: -6px;
}

.button {
    font-weight: bold;
}

.button:hover {
   background-color: #FF6633;
}

span {
    letter-spacing: 4px;
}

2 Answers

Edgars M
Edgars M
2,019 Points

As Your layout is fixed, Your problem is purely mathematical. Try this

.main-wrapper {
    text-align: center;
    width: 1460px;
    min-height: 100%;
    margin: 0 auto;
    padding-left: 75px;
    padding-right: 75px;
}

.first-content img{
   width: 190px;
   height: 190px;
   border: 5px solid white;
   border-radius: 10px;
   border-
}

.first-content ul li{
    margin: 31px;
    list-style: none;
}

Explanation:

  1. If You want Your layout to be fixed, you cannot use min-width. With this You are ensuring that Your wrapper MUST be at least 1460px in width BUT it can be bigger if viewed on bigger screens thus producing the gap on the right side
  2. You are setting Your li elements to be 200x200 in size and images inside them also 200x200. But in addition You are adding 5px border to all images thus making the actual size of content 210x210px.

Here is the math:

  1. Wrapper width 1460px. Remaining space 1460
  2. Padding from left and right 75px. Remaining space 1460-75-75=1310
  3. 5 li elements with width 200px. Remaining space 1310-5*200=310
  4. Again 5 li elements. Each has left and right margin, so in total 10 margins. One margin 310/10=31

Hope this helps

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

When i add this, all the images get more placement to the left side, giving it a wierd placement

Edgars M
Edgars M
2,019 Points

I am sorry, my mistake. We don`t have to pay attention to the padding. Try:

.first-content ul li{
    margin: 46px;
    list-style: none;
}
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

when i add that to the code, the images on the right get placed underneath

Edgars M
Edgars M
2,019 Points

Ok, this should fix the problem

.first-content ul{
    padding: 0;
}
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

yeah that fixes it! thanks man i appreciate it :)

Edgars M
Edgars M
2,019 Points

No problem, can You please check my answer as best on for Your question?

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Okey, can you explosion why i hade to add padding 0 to the ul? So i know until next time

Edgars M
Edgars M
2,019 Points

Many HTML elements by the default have some CSS attached to them. Like in Your case ul elements had some padding even if You did not set one. It is a good idea and practice to use CSS reset code before starting Your project.

Just google CSS reset and use any one You like best.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Okey but i have normalize css, shouldnt it reset the default?

tobart
tobart
13,518 Points
tobart
tobart
13,518 Points

hi erdrag, you’re assigning this to your li’s

.first-content ul li{
    margin: 40px;
    list-style: none;
}

probably this causes the large gap after the last li in the div. removing the margin on the last child could help.

.first-content ul li:last-child{
    margin: 0;
}

This is an link to pseudo class selector Further more you are defining a min-width on your wrapper. Probably it’s worth trying it with a max-width, and also on your 

.first-content img{
   width: 200px;
   height: 200px;
   border: 5px solid white;
   border-radius: 10px;
   border-
}

a rule isn’t closed, which can cause strange behaviour.

cheers tobi

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

i tried this, but its still the same problem, does it have something to do with the main wrapper?