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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

#wrapper not centering excess margin/padding on the right

cant for the life of me seem to figure this out i've changed a lot but reverted back to the original code as shown in projector.

it started with my header not stretching across the screen. I fixed that by changing the 940px to a larger number under the #wrapper in css.

that worked but only for the header.

i switched it back to 940 because im still having issues with there being more space on the right side than the left.

My spacing on the contact sheet seems to be different than the example. less padding/margin is shown on mine

Nick Yoho
Nick Yoho
6,957 Points

can you post your code or a link to your workspace?

2 Answers

Nick Yoho
Nick Yoho
6,957 Points

Your wrapper div should not include the header in it, thats why its not displayed full width. I would move the opening wrapper div tag to just before your section tag, right after your closing header tag. Make sure you close the div before your footer.

Nick Yoho
Nick Yoho
6,957 Points
<body>
      <header>
        <a href="index.html" id="logo">
          <h1>Scott Wolf</h1>
          <h2>Designer</h2>
        </a>
        <nav>
          <ul>
            <li><a href="index.html" class="selected">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 id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimeation with color and texture.</p>
            </a>
          </li> 
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Experimeation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Experimeation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Experimeation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Experimeation with color and texture.</p>
            </a>
          </li>   
        </ul>  
      </section>
      </div>
      <footer>
        <a href="http://www.twitter.com"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a>
        <a href="http://www.facebook.com"><img src="img/facebook-wrap.png" alt="twitter logo" class="social-icon"></a>
        <p>&copy; 2017 Scott Wolf</p>
       </footer>

  </body>

Thank you a million, This has been a huge distraction for a few days!!!!

One of the reasons I am loving getting into this is because when I think all is hopeless I finally break down and ask a question that I doubt anyone will ever answer. and sure enough within 30 min its solved. I love the community here!

Thank you so much for taking the time to do this!

heres another one sorry https://w.trhou.se/zk4delj12k