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

Gabriella Toth
Gabriella Toth
2,385 Points
Posted by Gabriella Toth
Gabriella Toth
2,385 Points

My content doesn't align center

hi! I have been trying to build a simple css/html website from scratch for the first time and am running into difficulties. Please could someone let me know, what I am doing wrong here. I want the content to be centered across the site. Everything is actually center aligned, however, the header section and the body section look off, i.e they do not centrally align proportionally.

Here is my index.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Wolfdog Symbiosis | Peppi knows better</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <div class="leftheader"> Peppi knows better <br> Placeholder for logo </div> <nav> <ul> <li><a href="index.html">Welcome</a></li> <li><a href="blog.html">Let's get to work!</a></li> <li><a href="about.html">About</a></li> </ul> </nav> </header> <section class="wrapper"> <h1 class="tagline"> Peppi the wolfdog<br> is always orderly,<br> except when...<br>

 </h1>

</section> <div id="main"> <section> <ul id="gallery"> <li> <img src="img/Peppi-is-innocent"> <p>Hi, I'm Peppi. Peppi Holczman. I came to this world in 2015 and have been making sure to leave a decent footprint ever since!</p> </li> <li> <img src="img/Peppi-is-innocent"> <p>Hi, I'm Peppi. Peppi Holczman. I came to this world in 2015 and have been making sure to leave a decent footprint ever since!</p> </li> <li> <img src="img/Peppi-is-innocent"> <p>Hi, I'm Peppi. Peppi Holczman. I came to this world in 2015 and have been making sure to leave a decent footprint ever since!</p> </li> <li> <img src="img/Peppi-is-innocent"> <p>Hi, I'm Peppi. Peppi Holczman. I came to this world in 2015 and have been making sure to leave a decent footprint ever since!</p> </li> <li> <img src="img/Peppi-is-innocent"> <p>Hi, I'm Peppi. Peppi Holczman. I came to this world in 2015 and have been making sure to leave a decent footprint ever since!</p> </li> <li> <img src="img/Peppi-is-innocent"> <p>Hi, I'm Peppi. Peppi Holczman. I came to this world in 2015 and have been making sure to leave a decent footprint ever since!</p> </li>
</ul> </section> </div> <footer>There is nothing quite like a life with a wolfdog. Fact.</footer> </body>

And here is my css so far: /* header styles */

header { width: 100%; padding: 10px; margin: 0 0 30px 0; text-align: center;

}

nav { text-align: center;

}

nav ul { list-style: none; }

nav li { display: inline-block; padding: 5px 10px }

nav li a { text-decoration: none; color: #222; text-transform: uppercase; transition: color 0.5s ease 0s; }

nav li a:hover { color: #ff282a; }

.leftheader { display: inline-block; text-align: center; text-transform: uppercase; }

/* main title spin ----------*/

.wrapper { padding: 0 5%; margin: 0 auto; max-width: 940px;

}

.tagline { text-align: center; text-transform: uppercase; }

/* blog------------ */

main {

margin: 0 auto; max-width: 940px; padding: 0 5%; }

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%;

}

/* general */

img { max-width: 100%; }

/* footer */

footer { clear: both; }

jsdevtom
jsdevtom
16,963 Points
jsdevtom
jsdevtom
16,963 Points

Hi I put your work in to a code pen here: http://codepen.io/anon/pen/grJomw

It's much easier to see whats going on like this :-)

3 Answers

Gabriella Toth
Gabriella Toth
2,385 Points
Gabriella Toth
Gabriella Toth
2,385 Points 
<head>
  <meta charset="utf-8">
    <title>Wolfdog Symbiosis | Peppi knows better</title>
      <link rel="stylesheet" href="css/style.css">
  </head>
 <body>
   <header>
   <div class="leftheader">
   Peppi knows better <br>
   Placeholder for logo
    </div>
   <nav>
    <ul>
      <li><a href="index.html">Welcome</a></li>
      <li><a href="blog.html">Let's get to work!</a></li>
      <li><a href="about.html">About</a></li>
     </ul>
    </nav>
   </header>
   <section class="wrapper">
   <h1 class="tagline">
     Peppi the wolfdog<br>
     is always orderly,<br>
     except when...<br>

     </h1>
   </section>
   <div id="main">
     <section>
      <ul id="gallery">
        <li>
          <img src="img/Peppi-is-innocent">
          <p>Hi, I'm Peppi. Peppi Holczman. I came to this world in 2015 and have been making sure to leave a decent footprint ever since!</p>
        </li>
        <li>
          <img src="img/Peppi-is-innocent">
          <p>Hi, I'm Peppi. Peppi Holczman. I came to this world in 2015 and have been making sure to leave a decent footprint ever since!</p>
        </li>
        <li>
          <img src="img/Peppi-is-innocent">
          <p>Hi, I'm Peppi. Peppi Holczman. I came to this world in 2015 and have been making sure to leave a decent footprint ever since!</p>
        </li>
        <li>
          <img src="img/Peppi-is-innocent">
          <p>Hi, I'm Peppi. Peppi Holczman. I came to this world in 2015 and have been making sure to leave a decent footprint ever since!</p>
        </li>
        <li>
          <img src="img/Peppi-is-innocent">
          <p>Hi, I'm Peppi. Peppi Holczman. I came to this world in 2015 and have been making sure to leave a decent footprint ever since!</p>
        </li>
        <li>
          <img src="img/Peppi-is-innocent">
          <p>Hi, I'm Peppi. Peppi Holczman. I came to this world in 2015 and have been making sure to leave a decent footprint ever since!</p>
        </li>    
      </ul>
    </section>
   </div>
 <footer>There is nothing quite like a life with a wolfdog. Fact.</footer>
   </body>```
Gabriella Toth
Gabriella Toth
2,385 Points
Gabriella Toth
Gabriella Toth
2,385 Points

```/* header styles */

header { width: 100%; padding: 10px; margin: 0 0 30px 0; text-align: center;

}

nav { text-align: center;

}

nav ul { list-style: none; }

nav li { display: inline-block; padding: 5px 10px }

nav li a { text-decoration: none; color: #222; text-transform: uppercase; transition: color 0.5s ease 0s; }

nav li a:hover { color: #ff282a; }

.leftheader { display: inline-block; text-align: center; text-transform: uppercase; }

/* main title spin ----------*/

.wrapper { padding: 0 5%; margin: 0 auto; max-width: 940px;

}

.tagline { text-align: center; text-transform: uppercase; }

/* blog------------ */

main {

margin: 0 auto; max-width: 940px; padding: 0 5%; }

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%;

}

/* general */

img { max-width: 100%; }

/* footer */

footer { clear: both; }```

Joel Bardsley
Joel Bardsley
31,246 Points
Joel Bardsley
Joel Bardsley
31,246 Points

Hi Gabriella, just checking that you're selecting "id" elements (i.e. div id="main" and ul id="gallery") with a # symbol in your css? It looks like you might have missed it off, but it could be an issue with the copy+paste.

If you want the gallery list items to be center aligned, just add text-align: center to #gallery li.

I've copied your code to a temporary codepen with the amends to make it easier - let me know if this is the layout you were looking for.

Thanks, Joel