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 Styling Web Pages and Navigation Style the Portfolio

I have a large space in the middle of my gallery. Help?

I've discovered that my gallery is having a weird issue. My code(both index and css) should match up pretty much to Nicks at this moment. When I load my page my first layer of photos have floated fine but the layer following leaves a hole between the 2nd and third img. I know the the problem must be on CSS but my brain is not seeing it. What am i doing wrong?

Please post your code so we can have a look at it, otherwise it's gonna be hard for us to see what you're doing wrong :D

here is my index: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Peter Van Ess | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Lora|Montserrat' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.hmtl"><div id="logo"> <h1>Peter Van Ess</h1> <h2>Designer</h2> </div> </a> <nav> <ul> <li><a href="index.html"class="selected" >Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="seed faith ministries.html">Seed Faith Ministries</a>
</li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/1.jpg"> <img src="img/1.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/2.jpg"> <img src="img/2.jpg" alt=""> <p>Postcard 2</p> </a> </li> <li> <a href="img/2.jpg"> <img src="img/2.jpg" alt=""> <p>Postcard 4</p> </a> </li> <li> <a href="img/1.jpg"> <img src="img/1.jpg" alt=""> <p>Playing with treehouse</p> </a> </li> </ul> </section> <footer> <a href="http://facebook.com/peter.v.ess"><img src="img/facebook-wrap.png" alt= "facebook logo"></a> <p>© 2014 Peter Van Ess.</p> </footer> </div> </body> </html>

and css

/*****************
GENERAL
**************/
body {
  font-family:'lora',serif;
}

img {
  max-width: 100%;
}

#wrapper {
  max-width: 0 auto;
  padding: 5% 5%;
}

a{
  text-decoration: none;
}

/* logo color green*/
#logo {
  text-align: center;
  margin: O;
}
/* colored links*/


/*****************
HEADING
**************/
/* logo color green*/
#logo {
  text-align: center;
  margin: O;
}

h1 { 
  font-family: 'Montserrat', sans-serif;
  margin: 15px 0;
  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.75em;
  text-align:center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

  /*****************
Page Porfolio
**************/

  #gallery {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #gallery li a p img {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
  }

#gallery li a p {
  margin: 0%;
  padding: 0%;
  font-size: 0.75em;
  color: #bdc3c7;
}
/*****************
Colors
**************/
/* colored links*/
a {
  color: #6ab47b;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
  font-family: 'Montserrat', sans-serif;
}
/* logo text */
h1,h2 {
  color: #fff;
}
/* nave background on mobile */
nav {
  background: #6ab47b ;
}
/* color nav link*/
nav a, nav a:visited {
  color: #fff
}
/* color hovered nav link*/
nav a.selected, nav a:hover {
  color: #32673f;
}
/* site body */
body {
  background-color: #fff;
  color: #999;
}

Thanks for any help! :)

Peter, do you have a link or something where I can view your site?

2 Answers

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Peter,

If your using your own images, then they might be the problem.
Try using the same image in every place to see if it fixes your issue, it may just be that one image is messing up your layout.

Hope this helps.