title: How to center images in a footer
body: <p>Novice here! I'm looking to adjust some code for this site: <a href="http://www.lakeofstars.org" rel="nofollow">http://www.lakeofstars.org</a></p>
  
  <p>The footer area at the base of each page contains a series of logos. The ideal is to ensure that the logo images in the footer display correctly on mobile (if they are too large, some of the logos drop down below the designated footer background), but also to get them to center correctly on desktop - as you'll see, they are currently nudged to the left.</p>
  
  <p>Here's the code as it stands:</p>
  
  <pre><code>#footer {
      position:absolute;
      bottom:0;
      width:100%;
      height:140px;           /* Height of the footer */
      background:#ffffff;
      border-top: solid 3px #ffc600;
      background-image:url(img/global/footer.gif);
      background-repeat: repeat-x;
      background-position:bottom;
  }
  
  
  #footer .structure {
      height: 140px;
      width: 94%;
  }
  
  #footer .structure li {
      display: inline-block;
      margin: 10px 10px 0 0;
      float: left;
  }
  
  #footer .structure li img {
      height: 65px;
      width: auto;
  }
  </code></pre>