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

Posted by Kristian Woods
Kristian Woods
23,414 Points

Why are my images breaking from their background?

I can't tell where I've gone wrong. I'm following the video exactly, however, my images aren't aligned with their background.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>BWM-Photos</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <meta name="description" content="Blue Water Music presents you witht the latest news on upcoming music festivals, album releases and much more">
</head>
<body>
  <header>
    <div id="logo">
       <a href="index.html"><img src="../img/bwm_logo2.png" alt="Blue Water Music Logo"></a>
       <a href="http://twitter.com/woods_kristian"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon-1"></a>
       <a href="http://facebook.com/kriswoods"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon-2"></a>
    </div>
    <nav>
      <ul>
        <li><a href="video.html">Videos</a></li>
        <li><a href="photo.html" class="selected">Photos</a></li>
        <li><a href="events.html">Events</a></li>
        <li><a href="news.html">Latest News</a></li>
        <li><a href="merchandise.html">Merchandise</a></li>
        <li><a href="contact.html">Contact Us</a></li>
      </ul>
    </nav>
  </header>
    <div>
        <input type="search" id="searchBox" placeholder="Search...">
    </div>
<div id="wrapper">
    <h1 id="photo-h1">Festival Photos</h1>
    <section>
        <ul id="gallery">
            <li><a href="img/t-in-the-park-mainstage1.jpg"><img src="../img/t-in-the-park-mainstage1.jpg" class="tphoto" alt="T in the park"><p>T In The Park 2015</p></a></li>
            <li><a href="img/t-in-the-park-mainstage1.jpg"><img src="../img/t-in-the-park-mainstage1.jpg" class="tphoto" alt="T in the park"><p>T In The Park 2015</p></a></li>
            <li><a href="img/t-in-the-park-mainstage1.jpg"><img src="../img/t-in-the-park-mainstage1.jpg" class="tphoto" alt="T in the park"><p>T In The Park 2015</p></a></li>
            <li><a href="img/t-in-the-park-mainstage1.jpg"><img src="../img/t-in-the-park-mainstage1.jpg" class="tphoto" alt="T in the park"><p>T In The Park 2015</p></a></li>
            <li><a href="img/t-in-the-park-mainstage1.jpg"><img src="../img/t-in-the-park-mainstage1.jpg" class="tphoto" alt="T in the park"><p>T In The Park 2015</p></a></li>
        </ul>
    </section>
    </div> 
    <footer>
        <p>&copy; 2015 Blue Water Music.</p>
    </footer>
</body>




</html>

body {
  background-color: #231f20;
  margin: 10px;
}

#wrapper {
  max-width: 1024px;
  margin: 0 auto;

 }

#homepagebg {
  width: 100%;
  height: 768px;
  margin: auto;
}

#logo {
  text-align: center;
  margin: 0 auto;
}

nav {
  margin-top: 10px;
  border-top: 1px solid #fff;
}

nav li {
  display: inline-block;
  margin-right: 5px;
}

li a {
  font-family: "myriad regular pro", Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  color: #fff;
  margin-bottom: 5px;
  padding: 5px;
  text-decoration: none;
}

 nav a:hover {
/*  border-bottom: 2px solid #fff;*/
  color: #fff;
}

a:link {
  color: #fff;
}

 nav a:active {
  color: #70767b;
}

/*
nav a:visited {
  color: #70767b;
}
*/

nav a.selected {
  color: #fff;
  border-bottom: 2px solid #fff;
}


footer p {
  color: #fff;
}

footer {
  text-align: center;
  clear: both;
  margin-top: 15px;
}

.social-icon-1 { /* Twitter icon */
  width: 50px;
  height: 50px;
  border: 1px solid #fff;
  float: right;
  margin-top: 50px;
  margin-left: 10px;
}

.social-icon-2 { /* Facebook icon */
  width: 50px;
  height: 50px;
  border: 1px solid #fff;
  float: right;
  margin-top: 50px;

}
/*****************************************************
 Page: Photos
******************************************************/

li img {
    max-width: 100%;


}

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
}

section li a p {
    margin: 0;
    padding: 5%;
    font-size: 0.75em;
    color: grey;
    text-decoration: none;
    border: none;
}


#vids {
  margin: 0 auto;
  text-align: center;
  margin: 10px;
}

#vids iframe {
  margin: 10px;
}

1 Answer

Unsubscribed User
Unsubscribed User
8,841 Points
Unsubscribed User
Unsubscribed User
8,841 Points

Hi,

can you correct the image tag and check if it works.. It should have been, 

<img src="/img/t-in-the-park-mainstage1.jpg"> -- correct one

<ul id="gallery">
            <li><a href="img/t-in-the-park-mainstage1.jpg"><img src="../img/t-in-the-park-mainstage1.jpg" class="tphoto" alt="T in the park"><p>T In The Park 2015</p></a></li>
            <li><a href="img/t-in-the-park-mainstage1.jpg"><img src="../img/t-in-the-park-mainstage1.jpg" class="tphoto" alt="T in the park"><p>T In The Park 2015</p></a></li>
            <li><a href="img/t-in-the-park-mainstage1.jpg"><img src="../img/t-in-the-park-mainstage1.jpg" class="tphoto" alt="T in the park"><p>T In The Park 2015</p></a></li>
            <li><a href="img/t-in-the-park-mainstage1.jpg"><img src="../img/t-in-the-park-mainstage1.jpg" class="tphoto" alt="T in the park"><p>T In The Park 2015</p></a></li>
            <li><a href="img/t-in-the-park-mainstage1.jpg"><img src="../img/t-in-the-park-mainstage1.jpg" class="tphoto" alt="T in the park"><p>T In The Park 2015</p></a></li>
        </ul>