title: How to make these two elements side by side
body: <p>I would like to make these two elements or divs align next to each other. Currently this is the website. www.toppertv.org *(the second part is hidden until I figure the code out)</p>
  
  <p>The code is as follows:</p>
  
  <pre><code>&lt;div id="social-list" class="text-center"&gt;
  &lt;h4&gt;&lt;b&gt; Connect With us&lt;/b&gt;&lt;/h4&gt;
  &lt;ul&gt;
     &lt;li&gt;&lt;a href="https://www.facebook.com/TopperTV13" &gt;                                
        &lt;img src="img/facebook-small.png" &gt;
  &lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="https://twitter.com/topper_tv" &gt;                            
        &lt;img src="img/twitter-small.png" &gt;
  &lt;/a&gt;&lt;/li&gt;                   
     &lt;li&gt;&lt;a href="instagram.com/toppertv" &gt;                              
       &lt;img src="img/instagram-small.png" &gt;
  &lt;/a&gt;&lt;/li&gt;               
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="btn" class="text-center"&gt;&lt;a href="https://www.smartrecruiters.com/toppertv" &gt;                  
  
  &lt;h4&gt;Apply Now&lt;/h4&gt;
  &lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The Css:</p>
  
  <pre><code>#social-list h4 ul {
  list-style-type:none;
  margin:0;
  padding:0;
    overflow:hidden;
  float:left;      
  }
  
  #social-list ul li {    
  display:inline;
  }
  
  #social-list ul li a {
  text-decoration:none;
  padding:0.2em 1em 0.2em 1em;
  }
  
  #social-list ul li a img {
  width:auto;
  }
  
  #btn{
  display:inline;
  }
  </code></pre>