title: Html footer layout (ul and li in the same line)
body: <p>Question: How to make it like ul and li in the same line. Can anyone help me with this problem. Thanks a lot.</p>
  
  <pre><code>Product product product product
  Drink  Drink  Drink  Drink
  Food  Food  Food  Food
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>   #footer{
          display:inline;
      }
  
      #footer .footer_container{
          display:inline;
          border:1px solid red;
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>   &lt;div id="footer"&gt;
  
           &lt;div class="footer_container"&gt;
  
              &lt;section&gt;
                      &lt;h1&gt;Product&lt;/h1&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Product&lt;/li&gt;
                          &lt;li&gt;Product&lt;/li&gt;
                          &lt;li&gt;Product&lt;/li&gt;
                          &lt;a href="google.com"&gt;&lt;li&gt;Product&lt;/li&gt;&lt;/a&gt;
                      &lt;/ul&gt;
                &lt;/section&gt;
  
                &lt;section&gt;
                      &lt;h1&gt;Drinks&lt;/h1&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Drinks&lt;/li&gt;
                          &lt;li&gt;Drinks&lt;/li&gt;
                          &lt;li&gt;Drinks&lt;/li&gt;
                          &lt;a href="google.com"&gt;&lt;li&gt;Product&lt;/li&gt;&lt;/a&gt;
                      &lt;/ul&gt;
                &lt;/section&gt;
  
                &lt;section&gt;
                      &lt;h1&gt;Food&lt;/h1&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Food&lt;/li&gt;
                          &lt;li&gt;Food&lt;/li&gt;
                          &lt;li&gt;Food&lt;/li&gt;
                          &lt;a href="google.com"&gt;&lt;li&gt;Product&lt;/li&gt;&lt;/a&gt;
                      &lt;/ul&gt;
                &lt;/section&gt;
           &lt;div&gt;
       &lt;/div&gt;
  </code></pre>