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 Adding Pages to a Website Add a New Page

I can't add 10 pictures, once I do that the page gets a distorted look. images float around, not side by side.

guys I want to add a top 10 photos, I added <h2></h2> on top of the page as a tittle, I don't know if this is the problem once I added the 10 photos they float around distorting the ( side by side semblance } of the pictures. Any help with this please. I would appreciate so much.

4 Answers

Russell Sawyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Russell Sawyer
Front End Web Development Techdegree Student 15,705 Points

If you post your code we can better assist with a solution. Checkout the Markdown Cheatsheet at the bottom of this page on how to format and post your code to the forum. :sparkles:

Harrison Court
Harrison Court
4,232 Points

Don't forget to use ``` (Above Spacebar)

It layers your code like this!

 /***************************************************
GENERAL
****************************************************/
a {
  text-decoration: none;
}

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

img {
 max-width: 100%;
}

h3 {
 margin: 0;
}



/***************************************************
HEADING
****************************************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}



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

h1 {
  font-family: 'Denk One';
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}


h2 {
  font-family: 'Denk One';
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;

}


/***************************************************
NAVIGATION
****************************************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}


nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

.social-ico {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/***************************************************
FOOTER
****************************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}



/***************************************************
PORTFOLIO
****************************************************/

#loco {

  font-family: 'Roboto Slab';
  font-weight: 800;
  font-size: 1.50em;
  margin: 0 0 30px 0;
  padding: 15px 0 0 0;
  color: #6ab47b;
  text-align: center;
}


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

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

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 1.0em;
  color: #67ba76;
}



/***************************************************
PAGE: ABOUT
****************************************************/

.profile-photo {
  display: block;
  max-width: 90px;
  margin: 0 auto 30px;
  border-radius: 100%;
}



/***************************************************
PAGE: CONTACT
****************************************************/



.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}



.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}



/***************************************************
COLORS
****************************************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}


/* nav background on mobile */
nav {
  background: #599a68;
 }  


/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}


/* nav link */
nav a, nav a:visited {
  color: #fff;
}

nav a.selected, nav a:hover {
  color: #32673f;
}```
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
     <title>LITTLEHUGGIES</title>
     <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Denk+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
     <link rel="stylesheet" href="css/main.css">
  </head>

  <body>
    <header>
      <a href="index.html" id="logo">
      <h1>Littlehuggies</h1>
      <h2>Photography</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>
      <p id="loco">Top6 photos every parent must get of their baby</p>
      <ul id="gallery">

        <li>
          <a href="img/kid1.jpg">
            <img src="img/kid1.jpg" alt="">
            <p>Sporting a funny onesie</p>
          </a>
        </li>

        <li>
          <a href="img/kid2.jpg">
            <img src="img/kid2.jpg" alt="">
            <P>Hand holding your finger</P>
          </a>
        </li>


        <li>
          <a href="img/kid3.jpg">
            <img src="img/kid3.jpg" alt="">
            <p id="jaja">Ear, something you'll always remember</p>
          </a>
        </li>

        <li>
          <a href="img/kid4.jpg">
            <img src="img/kid4.jpg" alt="">
            <p>Your kid’s hair will never be the same as it is when they’re a baby. Capture it!</p>
          </a>
        </li>

        <li>
          <a href="img/kid5.jpg">
            <img src="img/kid5.jpg" alt="">
            <p>Waving is one of the very first ways your baby will communicate with the world.</p>
          </a>
        </li>

        <li>
          <a href="img/baby3.jpg">
            <img src="img/baby3.jpg" alt="">
            <p>There are lots of photo ops when your baby is awake, but don’t forget to snap some photos when they’re dozing, too.</p>
          </a>
        </li>

      </ul>

    </section>

    <footer>
     <a href="https://www.twitter.com/e_corpp">
     <img src="img/twitter-wrap.png" alt="twitter logo" class="social-ico"></a>
     <a href="https://www.facebook.com/Littlehuggies-369412063183206/">
     <img src="img/facebook.jpg" alt="facebook logo"class="social-ico"></a>
      <p>&copy; 2016 Littlehuggies</p>
    </footer>
    </div>
  </body>

</html>```

guys the pictures are a size of 1024x768 as nick says in the tutorial. it only works well with 5 or 6 pictures but I can't add more than that. thank ya'll so much!