title: Centering Content of Relatively Sized Div with Relatively Sized Elements, While Keeping Elements Left Aligned
body: <p>I know I'm probably not explaining this correctly, but I'm playing around with creating an HTML template which lists out TV shows as cover artwork. Each element is flexible, to a degree. It will show as many as five of the shows per row by expanding on larger screens, while showing a minimum of two on smaller screens like an iPhone or Android device. I haven't really done anything with CSS or HTML for a good ten years now, so I'm more than rusty.</p>
  
  <p>I've got myself 90% of the way there.. the only thing I really don't like, is that on rows with less than the maximum, it centers them. I want to get the set centered, but the elements aligned left so that it mimics the way a table would work.</p>
  
  <p>Any suggestions? I've tried a lot of things on stack overflow but nothing seems to get me where I'm trying to go. If using DIVs isn't the way to go, I'm definitely willing to scrap it and start over.</p>
  
  <p>Here is a sample of the HTML and CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="user-scalable=no, width=device-width, height=device-height" /&gt;
          &lt;style&gt;
              @import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
              body {
                  background: #EEE;
                  font-family: "Roboto", helvetica, arial, sans-serif;
                  font-weight: 100;
                  text-rendering: optimizeLegibility;
                  text-align: center;
                  margin: 0;
                  padding: 0;
              }
  
              .page-header {
                  position: fixed;
                  display: table;
                  background-color: #1b1e24;
                  top: 0;
                  left: 0;
                  right: 0;
                  height: 5em;
                  width: 100%;
                  z-index: 100;
                  color: #D5DDE5;
              }
              .header-content {
                  display: table-cell;
                  width: 100%;
                  vertical-align: middle;
                  font-size: 1.5em;
                  font-weight: 100;
              }
              .shows-container {
                  display: inline-block;
                  min-width: 414px;
                  text-align: center;
                  margin-top: 7em;
              }
              .show-container {
                  min-width: 189px;
                  display: inline-block;
                  vertical-align: top;
                  margin: 1%;
                  width: 16%;
              }
              .show-artwork {
                  padding-top: 139.15%;
                  position: relative;
                  width: 100%;
                  display: block;
              }
              .show-image {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  right: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
              }
              .show-name {
                  display: block;
                  max-width: 100%;
                  overflow: hidden;
                  white-space: nowrap;
                  background-color: #FFF;
                  text-align: left;
                  font-size: .7em;
                  font-weight: normal;
                  padding-left: .5em;
                  padding-top: 2.5em;
                  padding-bottom: 6%;
              }
  
              .show-airing {
                  display: inline-block;
                  width: 100%;
                  position: absolute;
                  bottom: -.7em;
                  margin: 0;
                  padding: 0;
                  left: 0;
                  font-size: .7em;
              }
              .show-day-count, .show-day-text {
                  display: inline-block;
                  padding: .3em;
                  font-weight: normal;
              }
              .day-today {
                  background-color: #F00;
                  color: #FFF;
              }
              .day-nottoday {
                  background-color: #4E5066;
                  color: #FFF;
                  padding-left: 1em;
                  padding-right: 1em;
              }
              .day-today, .day-nottoday {
                  border-bottom-left-radius: .3em;
                  border-top-left-radius: .3em;
              }
              .show-day-text {
                  background-color: #DDD;
                  border-bottom-right-radius: .3em;
                  border-top-right-radius: .3em;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div class="page-header"&gt;
            &lt;div class="header-content"&gt;Tracking Shows&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="shows-container"&gt;
              &lt;div class="show-container"&gt;
                  &lt;div class="show-artwork"&gt;
                      &lt;img src="http://tvmazecdn.com/uploads/images/original_untouched/53/132622.jpg" class="show-image" /&gt;
                      &lt;div class="show-airing"&gt;&lt;div class="show-day-count day-today"&gt;TODAY&lt;/div&gt;&lt;div class="show-day-text"&gt;10:00 PM&lt;/div&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="show-name"&gt;GAME OF THRONES&lt;/div&gt;
              &lt;/div&gt;&lt;div class="show-container"&gt;
                  &lt;div class="show-artwork"&gt;
                      &lt;img src="http://tvmazecdn.com/uploads/images/original_untouched/53/132726.jpg" class="show-image" /&gt;
                      &lt;div class="show-airing"&gt;&lt;div class="show-day-count day-today"&gt;TODAY&lt;/div&gt;&lt;div class="show-day-text"&gt;10:30 PM&lt;/div&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="show-name"&gt;SILICON VALLEY&lt;/div&gt;
              &lt;/div&gt;&lt;div class="show-container"&gt;
                  &lt;div class="show-artwork"&gt;
                      &lt;img src="http://tvmazecdn.com/uploads/images/original_untouched/1/3570.jpg" class="show-image" /&gt;
                      &lt;div class="show-airing"&gt;&lt;div class="show-day-count day-nottoday"&gt;1&lt;/div&gt;&lt;div class="show-day-text"&gt;DAYS&lt;/div&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="show-name"&gt;AMERICAN DAD!&lt;/div&gt;
              &lt;/div&gt;&lt;div class="show-container"&gt;
                  &lt;div class="show-artwork"&gt;
                      &lt;img src="http://tvmazecdn.com/uploads/images/original_untouched/47/118626.jpg" class="show-image" /&gt;
                      &lt;div class="show-airing"&gt;&lt;div class="show-day-count day-nottoday"&gt;3&lt;/div&gt;&lt;div class="show-day-text"&gt;DAYS&lt;/div&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="show-name"&gt;THE AMERICANS&lt;/div&gt;
              &lt;/div&gt;&lt;div class="show-container"&gt;
                  &lt;div class="show-artwork"&gt;
                      &lt;img src="http://tvmazecdn.com/uploads/images/original_untouched/0/480.jpg" class="show-image" /&gt;
                      &lt;div class="show-airing"&gt;&lt;div class="show-day-count day-nottoday"&gt;4&lt;/div&gt;&lt;div class="show-day-text"&gt;DAYS&lt;/div&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="show-name"&gt;BONES&lt;/div&gt;
              &lt;/div&gt;&lt;div class="show-container"&gt;
                  &lt;div class="show-artwork"&gt;
                      &lt;img src="http://tvmazecdn.com/uploads/images/original_untouched/2/5102.jpg" class="show-image" /&gt;
                      &lt;div class="show-airing"&gt;&lt;div class="show-day-count day-nottoday"&gt;4&lt;/div&gt;&lt;div class="show-day-text"&gt;DAYS&lt;/div&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="show-name"&gt;ARCHER&lt;/div&gt;
              &lt;/div&gt;&lt;div class="show-container"&gt;
                  &lt;div class="show-artwork"&gt;
                      &lt;img src="http://tvmazecdn.com/uploads/images/original_untouched/22/56919.jpg" class="show-image" /&gt;
                      &lt;div class="show-airing"&gt;&lt;div class="show-day-count day-nottoday"&gt;14&lt;/div&gt;&lt;div class="show-day-text"&gt;DAYS&lt;/div&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="show-name"&gt;THE LAST SHIP&lt;/div&gt;
              &lt;/div&gt;
         &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>