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
Jonathan James
6,998 PointsWhy won't my third picture align with the others?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jonathan James | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Orbitron:400,500,700,900' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Jonathan James</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/img1.jpg">
<img src="img/img1.jpg" alt="image 1">
<p>Tree's and fog 1</p>
</a>
</li>
<li>
<a href="img/img2.jpg">
<img src="img/img2.jpg" alt="image 2">
<p>Tree's and fog 1</p>
</a>
</li>
<li>
<a href="img/img3.jpg">
<img src="img/img3.jpg" alt="image 3">
<p>Tree's and fog 1</p>
</a>
</li>
<li>
<a href="img/img4.jpg">
<img src="img/img4.jpg" alt="image 4">
<p>Tree's and fog 1</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://www.google.com"><img src="img/twitter-wrap.png" alt="twitter logo"></a>
<a href="http://www.google.com"><img src="img/facebook-wrap.png" alt="facebook logo"></a>
<p>© 2015 Jonathan James</p>
</footer>
</div>
</body>
</html>
/******************************* GENERAL *******************************/
body{ font-family: 'Architects Daughter', cursive; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img { max-width: 100%; /tells the images to fill the width of their parent element/ }
/******************************* HEADING *******************************/
logo {
text-align: center; margin: 0; }
h1{ font-family: 'Orbitron', sans-serif; margin: 15px 0; font-size: 1.75 ems; font-weight: normal; line-height: 0.8em; }
h2{ font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/******************************* NAVIGATION *******************************/ nav{ text-align: center; padding: 10px 0; margin: 20px 0 0; }
/******************************* FOOTER *******************************/
footer { font-size: 0.75ems; text-align:center; padding-top: 50px; color: #ccc; }
/******************************* PAGEL Portfolio *******************************/
gallery {
margin: 0; padding: 0; list-style: none; /* Removes bullet points from unordered list*/ }
gallery li{
float: left; width: 42%; margin: 2.5%; background-color: f5f5f5; color: #bdc3c7; }
/******************************* COLOR *******************************/
/* site body */ body { background-color: #fff; color: #999; }
/* green header */ header { background: #6ab47b; border-color: 599a68; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* logo text */ h1, h2 { color: #fff; }
/* link */ a { color: #6ab47b; }
/* nav background on mobile */ nav { background: #599a68; }
/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
3 Answers
Unsubscribed User
4,479 PointsI've used the html and css but can't properly replicate the issue and don't think I'm seeing what your seeing.
I'll leave it to the more experienced here. Sorry.
Rich Barker
7,832 PointsI think your gallery list should be 45% not 42%. 2.5% margin x 4 = 10%. 2 pictures wide for your mobile site. I could be mistaken though.
Unsubscribed User
4,479 PointsDo you mean 'why won't my third picture align with the others' in the desktop layout?
In which case, from memory, isn't the li width 28.something%?
EDIT: Looking back it's 100% - 15% (margins), leaving, 85% / 3 = 28.333333%
But this is only if you are asking why a third image doesn't align in the desktop layout.