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

Mike Pelosi
Mike Pelosi
794 Points
Posted by Mike Pelosi
Mike Pelosi
794 Points

Hello everyone, I can not get the pictures to center as required in the video. I have tried the .wrapper and #wrapper

This is the following code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mike Pelosi | Bard </title> <link rel="stylesheet" href="C:\Users\Mike\Desktop\Index.HTML\CSS\normalize.css"> <link rel="stylesheet" href="C:\Users\Mike\Desktop\Index.HTML\CSS\main.css"> </head> <body> <header> <a href="index.html."> <h1>Mike Pelosi</h1> <h2>Bard</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="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-01.jpg">
        <img src="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-01.jpg" alt="Image not available">
        <p>Experimentation with color and texture.</p> 
        </a>
    </li>
    <li>
        <a href="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-02.jpg">
        <img src="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-02.jpg" alt="Image not available">
        <p>Playing with blending modes in Photoshop.</p> 
        </a>
    </li>
    <li>
        <a href="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-06.jpg">
        <img src="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-06.jpg" alt="Image not available">
        <p>Tryign to create an 80's style of glows.</p> 
        </a>
    </li>
    <li>
        <a href="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-09.jpg">
        <img src="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-09.jpg" alt="Image not available">
        <p>Drips created using Photoshop brushes.</p> 
        </a>
    </li>
    <li>
        <a href="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-12.jpg">
        <img src="C:\Users\Mike\Desktop\Index.HTML\Image\numbers-12.jpg" alt="Image not available">
        <p>Creating shapes using repetition.</p> 
        </a>
    </li>

</ul>
</section>

<footer> <a href="http://twitter.com/mike_pelosi"> <img src="C:\Users\Mike\Desktop\Index.HTML\Image\twitter-wrap.png" alt="Twitter Logo"> </a> <a href="http://facebook.com/example"> <img src="C:\Users\Mike\Desktop\Index.HTML\Image\facebook-wrap.png" alt="Twitter Logo"> </a> <p>Ā© 2014 Michael Pelosi.</p> </footer> </div>

</body> </html>

1 Answer

Mitchell Springer
Mitchell Springer
2,576 Points
Mitchell Springer
Mitchell Springer
2,576 Points

If you see in the video, the pictures aren't centered there either. It's because they still have a list style and are just too large. You are only centering the wrapper. In a later video you'll fix the images.

Also, just an observation, you never put the beginning footer tag. Your ending should look like this

<footer>
        <a href="http://twitter.com/mike_pelosi">
        <img src="C:\Users\Mike\Desktop\Index.HTML\Image\twitter-wrap.png" alt="Twitter Logo">
        </a>
        <a href="http://facebook.com/example">
        <img src="C:\Users\Mike\Desktop\Index.HTML\Image\facebook-wrap.png" alt="Twitter Logo">
        </a>
 <p>&copy; 2014 Michael Pelosi.</p>
</footer>
Mike Pelosi
Mike Pelosi
794 Points
Mike Pelosi
Mike Pelosi
794 Points

Hello Mitchell,

Problem is resolved. After a few close outs of the browser, it appears to work fine.

Very bizarre.

Thanks for the heads up about the footer tag!

Sincerely, Mike

Mitchell Springer
Mitchell Springer
2,576 Points
Mitchell Springer
Mitchell Springer
2,576 Points

Weird. Glad you got it resolved!