title: Why are my images not displaying inline
body: <p>I'm not sure how to get my images to display inline (as in next to each other horizontally). Presently they are below each other. My idea was to have a wrapper for the whole page then a div for the images 'homepageImageBanner' and just use display-inline for that div but maybe I need to target the images specifically to display them inline? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    width: 80%;
    margin: auto;
  }
  .homepageImageBanner {
    width: 80%;
    margin: auto;
    display: inline-block;
  }
  .homepageImageBannerList {
    list-style-type: none;
  }
  .sgaBadge {
    width: 200px;
    height: 200px;
    border: 0;
  }
  .lgaBadge {
    width: 120px;
    height: 120px;
    border: 0;
  }
  .egLogo {
    border: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;!-- Images --&gt;
    &lt;div class="homepageImageBanner"&gt;
      &lt;ul class="homepageImageBannerList"&gt;
        &lt;li&gt;
          &lt;a href="http://www.sga.org/" target="_blank"&gt;
            &lt;img class="sgaBadge" alt="sga logo" src="http://placehold.it/200x200" /&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="http://www.lga.org.uk/" target="_blank"&gt;
            &lt;img class="lgaBadge" alt="lga logo" src="http://placehold.it/120x120" /&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="http://eg.com/" target="_blank"&gt;
            &lt;img class="egLogo" alt="eg logo" src="http://placehold.it/50x50" /&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>