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

Posted by dotz
dotz
6,733 Points

How to Make a Website/Css/Center the Wrapper CSS not updating - can't find error in code.

I have searched questions on this but the answers don't seem to address my problem. Below is my code. I had to do a workaround to get normalize to upload so not sure if that is it but since I added Main.css, the code won't update in the browser Preview. Normalize.css and main.css are in the Css folder I created. I am using Chrome.

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

And from Main.css

a {
  text-decoration: none;
}

#wrapper{
  max-width: 940px;
  margin: 0 auto;
  background: orange;

}

I don't want to go further until I sort this out. I have deleted and retyped everything relevant with no success. Thank you very much for your help.

wuworkshop
wuworkshop
3,429 Points

Do you have your code in a Workspace? Could you provide the preview link? It's the link that you get when you click the top-right icon that looks like an eye.

James Maddox
James Maddox
17,154 Points

Is wrapper a class or ID in your html code? If it is a class it should be .wrapper { max-width: 940px; margin: 0 auto; background: orange; }

Then it should work. Without seeing the rest of your html coding it's hard to pinpoint the error.

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

As James Maddox said:

Check you HTML code what type the wrapper is: it should be an id="wrapper" for this CSS code to select that id.

Thats the only thing all we can say since you didn't provide your HTML code.

6 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Michelle,

I've pasted your code in a codepen here everything seems to be working fine.
The only thing I can think of is a file path error, triple check your file path spelling then let us know if you still have the problem.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Michelle,

If your having problems with normalize, the best solution is to goto this page. Copy the code, then create a new file in workspaces called normalize.css and paste the code into it, you now have the normalize file to link to your html.

I noticed in you post you said you added Main.css, but in your code example you linked main.css.
If that was a typo please ignore it. If not i would suggest changing Main.css to main.css.

Apart from that your html and css looks fine.

If your still having problems please let us know.

Hope this helps.

dotz
dotz
6,733 Points
dotz
dotz
6,733 Points

Hello everyone,

I did what Wayne suggested but the main.css file does not apply the changes to normalize. I will cut & paste my code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Michelle | Programmer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    </head>
     <body>
        <header>
          <a href="index.html">
             <h1>Michelle</h1>
              <h2>Programmer</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>Caption goes here</p></a>
             </li>
             <li>
               <a href="img/numbers-02.jpg">
                  <img src="img/numbers-02.jpg" alt="">
               <p>Caption goes here</p></a>
             </li>
             <li>
               <a href="img/numbers-06.jpg">
                  <img src="img/numbers-06.jpg" alt="">
               <p>Caption goes here</p></a>
             </li>
             <li>
               <a href="img/numbers-09.jpg">
                  <img src="img/numbers-09.jpg" alt="">
               <p>Caption goes here</p></a>
             </li>
             <li>
               <a href="img/numbers-12.jpg">
                  <img src="img/numbers-12.jpg" alt="">
               <p>Caption goes here</p></a>
             </li>
          </ul>
         </section>
         <footer>
          <p>&copy; 2014 mmd.</p>
         </footer>
       </div>
    </body>
 </html>

main.css is copied from the video (there was also a background-color test that didn't work)

a {
  text-decoration: none;
}

#wrapper {

}

Here is my preview link. http://port-80-zejuepz8lv.treehouse-app.com/

Note: I am missing some code for twitter & FB icons but nothing else of relevance.

Thank you very much everyone.

wuworkshop
wuworkshop
3,429 Points

Michelle Dotzenrod, for some reason your preview link isn't working. I get a page that says:

Workspace Unavailable

This is a preview link for a Treehouse Workspace that is not currently active. If you are the workspace owner, you can launch it again via the Treehouse site.

James Maddox
James Maddox
17,154 Points
James Maddox
James Maddox
17,154 Points

While inspecting your code, I noticed that you didn't have a closing </div> tag after your closing </section> tag. Therefore, your wrapper will not work because it is not closed. Add the closing div tag and everything should work.

dotz
dotz
6,733 Points
dotz
dotz
6,733 Points

I have a closing div tag before footer. Do you mean in another spot? Also the css did not update the preview prior to adding the div id wrapper (we had to do a body background color change that also didn't work) so I don't think that's it. Thank you.

dotz
dotz
6,733 Points
dotz
dotz
6,733 Points

Thank you so much for sticking with me! I realized my css folder in which the two files were saved was CSS. CAPS matter everywhere, not for just file names. Thank you again Wayne, I am back on track.