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
arifbinyusuf
901 Pointswhy does the background-color not border around the whole images but instead just a portion.
The instructor, Nick Pettit applied a background-color of orange to the div called wrapper. But the color just surrounded a portion of the images and left another portion (right side) not surrounded. If the images are nested inside this div why doesn't the orange color surround all sides of the images. Below is the html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First website</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html">
<h1>Nick Pettit</h1>
<h2>Designer</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>number one(1) image</p>
</a>
</li>
<li>
<a href="img.numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>number two(2) image</p>
</a>
</li>
<li>
<a href="img.numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>number two(6)image</p>
</a>
</li>
<li>
<a href="img.numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>number two(9) image</p>
</a>
</li>
<li>
<a href="img.numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>number two(12) image</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://www.facebook.com/et.net.3"><img src="img/facebook-wrap.png"></a>
<a href="http://www.twitter.com/cashtrap"><img src="img/twitter-wrap.png"></a>
<p>© 2014 Nick Pettit</p>
</footer>
</div>
</body>
</html>
This is the corresponding css
#wrapper {
max-width: 940px;
margin: 0 auto;
background: orange;
}
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsWhat's happening is that the images are overflowing their wrapper container. They have a native size of 1024px and the wrapper div has a max width of 940px. So the wrapper div is correctly colored orange from it's left edge to it's right edge. It's just that it doesn't fully contain the images.
Later you will add some css to stop the images from overflowing the container.
thomascawthorn
22,986 PointsI need a thorough check.. but it sounds like you're missing some html markup your markup is incorrect. Take a really good look and make sure everything you've opened has been closed etc..
thomascawthorn
22,986 PointsYour html annoyingly looks okay. Have you solved it yet?
It could be an issue with another error in your css sheet which is impacting the wrapper style.
arifbinyusuf
901 Pointsarifbinyusuf
901 PointsThx man. This removes a lot of worries I was going thru.