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 How to Make a Website CSS: Cascading Style Sheets Center the Wrapper

jemelleesantos
jemelleesantos
3,495 Points
Posted by jemelleesantos
jemelleesantos
3,495 Points

I think I misplaced the div code?

I'm following the video but it doesn't seem to look the same. (I've changed some of the values just to be unique/different} but I am following along as he puts the margin and I may have put my div wrong...

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jemellee Santos | Freelance</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">    
  </head>

 <body>
           <header>
             <a href="index.html">
              <h1>Jemellee Santos</h1>
              <h2>Freelancer</h2>
             </a>

             <nav>
               <ul>
                 <li><a href="index.html">Portfolio</a></li>
                 <li><a href="about.html">About</a></li>
                 <li><a href="contact.html">Contact</a></li>
               </ul>
             </nav>
           </header>
      <div id=wrapper>
          <section>
            <ul>
              <li>
                <a href="img/numbers-01.jpg">
                  <img src="img/numbers-01.jpg" alt"">
                  <p>Numba One</p>
                </a>
              </li>
              <li>
                <a href="img/numbers-02.jpg">
                  <img src="img/numbers-02.jpg" alt"">
                  <p>Ito Dalawa</p>
                </a>
              </li>
              <li>
                <a href="img/numbers-06.jpg">
                  <img src="img/numbers-06.jpg" alt"">
                  <p>Numero Sies</p>
                </a>
              </li>
              <li>
                <a href="img/numbers-09.jpg">
                  <img src="img/numbers-09.jpg" alt"">
                  <p>Kyuu~</p>
                </a>
              </li>
              <li>
                <a href="img/numbers-12.jpg">
                  <img src="img/numbers-12.jpg" alt"">
                  <p>eight plus four equals twelve</p>
                </a>
              </li>
            </ul>
          </section>

            <footer>
            <p align="center"><a href="http://www.facebook.com/j3mj3m"><img src="img/facebook-wrap.png" alt="Facebook logo"></a>
              <a href="http://www.twitter.com/JemConnects"><img src="img/twitter-wrap.png" alt="Twitter logo"></a>
            </p>
            <p align="center">&copy; 2014 Jemellee Santos</p> 
            </footer>
        </div>
  </body>
</html>
Dustin Matlock
Dustin Matlock
33,856 Points

Hello Jemelle, I went ahead and fixed code insertion for you. It's relatively simple, and below is a graphical representation of how it works as well. Welcome to Treehouse!

Posting Code to the Forum

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Dustin Matlock;

Love the animated gif. Mind if I steal and use it on occasion?

MIT license??? :smile:

Ken

Dustin Matlock
Dustin Matlock
33,856 Points

Well of course. That's what it's for. :smiley:

Robert Komaromi
Robert Komaromi
11,927 Points
Robert Komaromi
Robert Komaromi
11,927 Points

All the alt"" attributes inside your #wrapper are missing the = symbol. It should be alt="". Although this shouldn't really break anything.

2 Answers

thuselem
thuselem
7,716 Points

The "wrapper" inside your div tag should be in quotes. So it would read: 

<div id="wrapper">

Hopefully that will apply your CSS!

Michael Thomason
Michael Thomason
4,497 Points
Michael Thomason
Michael Thomason
4,497 Points

To build on Thuselem's comment.

You have:

<div id=wrapper>

You need:

<div id="wrapper">

Then in your CSS file you should be applying whatever styles you want by:

#wrapper {

styles go here;
}
Robert Komaromi
Robert Komaromi
11,927 Points
Robert Komaromi
Robert Komaromi
11,927 Points

Attribute values don't need to be quoted. Not having quotes around wrapper is not the cause of the problem. However, wrapping attribute values in quotes is definitely recommended (you should always do it).