title: Adding a partner logo to the footer of my website on the same line as the rest of my partner logos?
body: <p>I'm trying to add a new partner logo to the footer of my website but it keeps appearing on the next line, I was wondering if you guys could help me out with getting it on the same line as the others?</p>
  
  <p>HTML (I've removed the links and alt tags for ease of readability):</p>
  
  <pre><code>&lt;section class="bottom-logo"&gt;
      &lt;div class="row"&gt;
           &lt;div class="large-12 columns"&gt;
              &lt;ul class="footer-logos"&gt;
                  &lt;li&gt;&lt;img src="" alt="" /&gt;  &lt;/li&gt;
                  &lt;li&gt;&lt;img src="" alt="" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="" alt="" /&gt; &lt;/li&gt;
                  &lt;li&gt;&lt;img src="" alt="" /&gt; &lt;/li&gt;
                  &lt;li&gt;&lt;img src="" alt="" /&gt; &lt;/li&gt;
                  &lt;li&gt;&lt;img src="" alt="" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="" alt="" /&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.bottom-logo{min-height: 150px;}
  .bottom-logo img{
      filter: grayscale(1);
      -webkit-filter: grayscale(1);
      -moz-filter: grayscale(1);
      -o-filter: grayscale(1);
      -ms-filter: grayscale(1);
      opacity: 0.5;
      margin-top: 30%;
      margin-left: auto;
  }
  .bottom-logo img:hover{
      filter: grayscale(0);
      -webkit-filter: grayscale(0);
      -moz-filter: grayscale(0);
      -o-filter: grayscale(0);
      -ms-filter: grayscale(0);
      opacity: 1;
  }
  
  .footer-logos li{
      list-style: none;
      display: inline-block;
      margin: 2% 3.5%;
  }
  </code></pre>
  
  <p>Thanks!</p>