title: Centering a div inside a div on footer
body: <p>I'm very new to web development, but still can read/edit some stuff. I'm modifying a footer on a wordpress theme which has 3 widgets. I was able to setup the footer area along with 3 widgets.</p>
  
  <p>I wanted to reach two results:
  1 - mobile version, 3 widgets, one below the other.
  2 - desktop version, 3 widgets visible inline (side-by-side). On this second one I did not succeed.</p>
  
  <p>I defined in my footer.php</p>
  
  <pre><code>&lt;footer&gt;
  &lt;div id="footer-sidebar" class="secondary"&gt;
      &lt;div id="footer-content"&gt;
          &lt;div id="footer-sidebar1"&gt;
              &lt;?php
              if(is_active_sidebar('footer-sidebar-1')){
              dynamic_sidebar('footer-sidebar-1');
              }
              ?&gt;
          &lt;/div&gt;
          &lt;div id="footer-sidebar2" id="info-container:after"&gt;
              &lt;?php
              if(is_active_sidebar('footer-sidebar-2')){
              dynamic_sidebar('footer-sidebar-2');
              }
              ?&gt;
          &lt;/div&gt;
          &lt;div id="footer-sidebar3"&gt;
              &lt;?php
              if(is_active_sidebar('footer-sidebar-3')){
              dynamic_sidebar('footer-sidebar-3');
              }
              ?&gt;
          &lt;/div&gt;
  
              &lt;?php 
                  wp_nav_menu(
                      array(
                          'theme_location' =&gt; 'Footer',
                          'container' =&gt; 'false',
                          'fallback_cb' =&gt; 'false',
                          'menu_class' =&gt; 'main-links pull-right',
                          'menu_id'=&gt;'menu_footer'
                      ));
              ?&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Then I tried different thing in CSS unsuccesfully, currently looking like this:</p>
  
  <pre><code>footer {
      background: #0c0c0c;
      color: white;    
  }
  
  footer h3{
      color: white;
      font-family: 'bangers';
      font-size: 30px;
  }
  
  #footer-sidebar {
      overflow: hidden;
      text-align: center;
  }
  
  #footer-content {
      padding-top: 20px;
      padding-bottom: 10px;
      overflow: hidden;
      margin-left: 10%;
      margin-right:10%;
  
  #footer-sidebar1 {
      float: left;
      width: 21em;
      margin-right:5em;
      display: inline-flex;
  }
  
  #footer-sidebar2 {
      float: left;
      width: 21em;
      margin-right:5em;
      display: inline-flex;
  }
  
  #footer-sidebar3 {
      float: left;
      width: 21em;
      display: inline-flex;
  }
  
  #info-container:after {
      clear: both;
      content: "";
      display: table;
  }
  </code></pre>
  
  <p>I tried different suggestions but still cannot manage to center for the desktop version. Any help is highly appreciated. Let me know if I can further clarify the issue.</p>