Setting the wrapper to a percentage - content not centering.

Question

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%;
}

Answer 1 · 2016-03-28T04:03:31Z

March 28, 2016 4:03am

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?

Welcome to the Treehouse Community

Looking to learn something new?

Benjamin Hedgepeth

Benjamin Hedgepeth

Setting the wrapper to a percentage - content not centering.

1 Answer

Tom Hsu

Tom Hsu

Benjamin Hedgepeth

Benjamin Hedgepeth