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

centering problem!

When i put 5% padding on wrapper, it just add padding on the left side, heres a picture of it http://imgur.com/61wW3oy

and my footer and text gets wierd centering placements,

heres my css code!

body {
    background: url('../img/background.jpg');
}

header {
  background: url('../img/banner.jpg');
  padding: 20px;
  margin-bottom: 200px;
  min-height: 100%;
}

.main-wrapper {
    width: 100%;
    margin: 0 auto;
    padding-left: 5%;
    padding-right: 5%;
}



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

.first-content {

}

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

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

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

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



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

.button {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5px;
    border: 1px solid black;
    border-radius: 20px;
    background-color: orange;
    text-align: center;
    margin-bottom: 2px;
}

.button {
    font-weight: bold;
}

.button:hover {
   background-color: red;
}

2 Answers

jacob weber
jacob weber
20,743 Points
jacob weber
jacob weber
20,743 Points

It's a little tough to know where some of the issue could be since the HTML code isn't here. But, try setting your wrapper to display:block; and see if that helps at all.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Ill try that tomorow, and see if it helps, and ill get back with result

// erdrag

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

i tried it now, and it didnt help. heres my html code!

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
<title>Official website</title>
</head>
<body>
    <header class="main-header group">
        <p>LOGO</p>
    </header>
<div class="main-wrapper">

<section class="second-content">
<p>Hey, this is just some random text i have written, i dont know what to write now so im just gonna type som thing here, hmm wat this is random text this is random text</span>
</section>



<section class="first-content col">
    <ul>
      <li>
        <a href="dust2.html"><img src="img/dust2.jpg" alt="Dust2"></a>
      </li>
      <li>
        <a href="nuke.html"><img src="img/nuke.jpg" alt="Nuke"></a>
      </li>
      <li>
        <a href="aztec.html"><img src="img/aztec.jpg" alt="Aztec"></a>
      </li>
      <li>
        <a href="cache.html"><img src="img/cache.jpg" alt="Cache"></a>
      </li>
      <li>
        <a href="mirage.html"><img src="img/mirage.jpg" alt="Mirage"></a>
      </li>
      <li>
        <a href="inferno.html"><img src="img/inferno.jpg" alt="Inferno"></a>
      </li>
      <li>
        <a href="cobblestone.html"><img src="img/cobblestone.jpg" alt="Cobblestone"></a>
      </li>
      <li>
        <a href="overpass.html"><img src="img/overpass.png" alt="Overpass"></a>
      </li>
      <li>
        <a href="train.html"><img src="img/train.jpg" alt="Train"></a>
      </li>
      <li>
        <a href="vertigo.html"><img src="img/vertigo.jpg" alt="Vertigo"></a>
      </li>
    </ul>
</section>



<div class="push"></div>


<footer>
<p>&copy  2015, Tobbe and Erdrag all right reserved</p>
</footer>

</div>
</body>
</html>
jacob weber
jacob weber
20,743 Points
jacob weber
jacob weber
20,743 Points

Couple of quick notes first - you are closing your <p> inside <section class="second-content"> with a </section> rather than a </p> and you are missing the ; after your copyright.

To your question, the padding-right is actually working, it has to do with your width being set to 100%; for instance, try setting your padding-right to a larger value than 5% say like 50% and see what happens. To add space/padding inside the content, consider adjusting your width to being less than 100% - remember your width will be greater than 100% since you are adding padding - reference the box model.

These help a little too: <a href="http://css-tricks.com/almanac/properties/p/padding/" target="_blank" >http://css-tricks.com/almanac/properties/p/padding/</a>

<a href="http://www.w3schools.com/css/css_padding.asp" target="_blank">http://www.w3schools.com/css/css_padding.asp</a>

Hope that is of some help.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

when i removed the width of the wrapper, it got centered!

// erdrag