Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Setting the wrapper to a percentage - content not centering.

Instead of setting the wrapper to pixels I've been setting a wrapper to a percentage for my own project. I don't have any problem centering the wrapper. My problem is that the content within the wrapper will not center. If I set the wrapper to a max-width of a certain amount of pixels the content will center.

Secondly, I've noticed that if I set the individual list items (which are images) to a percentage width they become very tiny upon re-sizing the browser window. What declaration value would I use to maintain the proportions of the wrapper and the images within? When the image is set to a percentage (45%) it expands it with white space.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Example</title>
  </head>
  <body>
    <header class="siteHead">
      <div class="primaryNav cf">
        <h1 class="mainHeading">{ HH: develops; }</h1>
        <nav>
          <ul class="links">
            <li>ABCD</li>
            <li>EFGH</li>
            <li>IJKL</li>
            <li>MNOP</li>
            <li>QRST</li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="wrap">
      <section>
        <ul class="gallery cf">
          <li>
            <a href="abcd.html">
              <img src="img/img1.png" alt="picture 1">
            </a>
          </li>
          <li>
            <a href="efgh.html">
              <img src="img/img2.png" alt="picture 2">
            </a>
          </li>
          <li>
            <a href="ijkl.html">
              <img src="img/img3.jpg" alt="picture 3">
            </a>
          </li>
          <li>
            <a href="mnop.html">
              <img src="img/img4.png" alt="picture 4">
            </a>
          </li>
          <li>
            <a href="qrst.html">
              <img src="img/img5.png" alt="picture 5">
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <p>&copy; 2016 Web Developer</p>
      </footer>
    </div>
  </body>
</html>

CSS

* {
  box-sizing: border-box;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**********************
 SITE NAVIGATION
***********************/

.siteHead {
  background: gold;
}

.primaryNav {
  width: 72.5%;
  margin: 0 auto;
}

.mainHeading {
    float: left;
}

.links {
  list-style: none;
  padding: 0;
  margin: 0;
  float: right;
}

.links li {
  margin: 10px 0;
}


/*****************
 GALLERY
******************/
.wrap {
  width: 70%;
  margin: 20px auto;
}

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

.gallery li {
  /*width: 45%;*/    /*Commented out with due to white space created */
  float: left;
  margin: 2.5%;
  border: 5px solid;
}

img {
  display: block;
  max-width: 100%;
}

1 Answer

Tom Hsu
Tom Hsu
5,292 Points

Here's my answer to your first question:

.gallery {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center; /* New code */
}

.gallery li {
  /*width: 45%;*/    /*Commented out with due to white space created */
  /* float: left; */ /* Commented out */
  margin: 2.5%;
  border: 5px solid;
  display: inline-block; /* New code */
}

Add the ones I commented with "new code". And take out the float: left.

As for your second question. The images become tinier as you expand or contract the window? Also, not sure if it matters, but what pixel size are the pictures?

The images become tinier when I contract to the smallest viewport width. The dimensions for the images are 425x352.