title: having my <article> in the center winged by <aside> to the left and right
body: <p>I am trying to have my article box in the center between my left and right aside.</p>
  
  <pre><code>      &lt;center&gt;
       &lt;article&gt;        
       &lt;/article&gt;
       &lt;/center&gt;
  </code></pre>
  
  <p>is not working.</p>
  
  <pre><code>margin-left: auto;
  margin-right: auto;
  display: block;
  </code></pre>
  
  <p>is not working.</p>
  
  <p>although manually adjusting the margin works or using position relative, but
  I want to know  WHY neither <code>&lt;center&gt;</code> nor <code>margin: auto;</code> are working. </p>
  
  <p><strong>I am more interested in the WHY more than the how.</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper{
      width: 900px;
   height: 800px;
   margin-left: auto;
   margin-right: auto;
      font-family: khand,sans-serif;
   font-weight: bold; 
  }
  #socialmedia1 {
      background-image: url(tw.png);  
      background-size: 20px 20px;
      width: 20px;
      height: 20px;
      float: right;
      margin:38px 10px 0px 0px;
  
  }
  #socialmedia2 {
      background-image: url(fb.png);  
      background-size: 20px 20px;
      width: 20px;
      height: 20px;
      float: right;
      margin: 38px 10px 0px 0px;
  }
  #socialmedia3 {
      background-image: url(insta.png);  
      background-size: 30px 30px;
      width: 30px;
      height: 30px;
      float: right;
      margin: 30px 10px 0px 0px;
  
  }  
   header{
      width: 800px;
   height: 70px;
   border: 3px solid black;
   bottom: 20px;
   position: relative;    /* Had to move this to the bottom
                              to make space for icons*/
   bottom: -40px;
   margin-left: auto;
   margin-right: auto;
    
   }
   hr{
      height: 0px;
      padding: 0px;
      margin: 2px;
  
   }
   .logo{
   background-image :url(logo.png);
   background-size: 140px 140px;
   width: 140px;
   height:140px;
   position: relative;
   bottom: 35px;
   left: 20px;
   }
  ul{ 
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #fff;
      width: 450px;
      margin-left: auto;
      margin-right: auto;
   position: relative;
   bottom: 20px;
  }
  li a {
   display: block;
   color: black;
   padding: 14px 16px;
      text-decoration: none;
  }
  li a:hover:not(.active) {
   background-color: #911111;
  }
  li {
      float: left;
  }
  article {
      width: 200px;
      height: 400px;
      border: 3px solid black;
      margin-left: auto;
      margin-right: auto;
      display: block;
  }
  aside{
   width: 120px;       /*logo overlaps gotta use position relative..EDIT Nevermind i could*
   just add margin to make space without fucking erthing up*/
   height: 150px;
   border: 3px solid black; 
      margin-top: 15px;
   margin-bottom: 5px;
  }
  aside.right{
      width: 120px;
      height: 150px;
      border: 3px solid black;
      float: right;
      clear:right;
  
  }
  .titlebannerbox{
   width: 120px;
   height: 25px;
   background-color: #911111;
   position: relative;
   bottom: 17px;
      color: white;
  
   }
  .asidelogo{
     width: 27px;
     height: 27px;
     background-size: 27px 27px;
     background-image: url(titlebannerlogo.png);
     position: relative;
     bottom: 60px;
     margin-bottom: -65px; 
  }
  footer {
   width: 800px;
   height: 50px;
   border: 3px solid black;
   margin-left: auto;
   margin-right: auto; 
   margin-top: 40px;
  }
  
  
   
  
   
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Welcome&lt;/title&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Khand:400,700' rel='stylesheet' type='text/css'&gt;
  &lt;link rel="stylesheet"href="style.css"&gt;
  &lt;style&gt;
  &lt;/style&gt;
  &lt;/head&gt;
    &lt;body&gt; 
       &lt;div id="wrapper"&gt;
         &lt;header&gt; 
             &lt;a href="https://twitter.com" id="socialmedia1"&gt;&lt;/a&gt;
             &lt;a href="https://facebook.com" id="socialmedia2"&gt;&lt;/a&gt;
             &lt;a href="https://youtube.com" id="socialmedia3"&gt;&lt;/a&gt;       
           &lt;div class="logo"&gt;&lt;/div&gt;    
         &lt;/header&gt;
          &lt;nav&gt; 
           &lt;ul&gt;
             &lt;li&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt; 
         &lt;/nav&gt;
  
       &lt;aside class="right"&gt;
             &lt;p class="titlebannerbox" align="right"&gt;Salary&lt;/p&gt;
             &lt;p class="asidelogo"&gt;&lt;/p&gt;
             &lt;hr&gt;
             &lt;table cellspacing="0" style="border-spacing:-5px;"&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td style="width: 10%"&gt;Ruby&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;$109k&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Object C&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;$108k&lt;/td&gt;
               &lt;/tr&gt; 
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Python&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;$100k&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Java&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;$94k&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;C++&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;$93k&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Javascript&lt;/td&gt;
                 &lt;td style="text-align: right;"&gt;$91k&lt;/td&gt;
               &lt;/tr&gt;
                 &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;C&lt;/td&gt;
                 &lt;td style="text-align: right;"&gt;$90k&lt;/td&gt;
               &lt;/tr&gt;
             &lt;/table&gt;          
         &lt;/aside&gt;
         &lt;aside&gt;
           &lt;p class="titlebannerbox" align="right"&gt;Learned&lt;/p&gt;
             &lt;p class="asidelogo"&gt;&lt;/p&gt;
             &lt;hr&gt;
             &lt;table cellspacing="0" style="border-spacing:-5px;"&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td style="width: 10%"&gt;HTML&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;60%&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;CSS&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;60%&lt;/td&gt;
               &lt;/tr&gt; 
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Javascript&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;0.001%&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Java&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;0%&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;PhP&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;0%&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Ruby&lt;/td&gt;
                 &lt;td style="text-align: right;"&gt;0%&lt;/td&gt;
               &lt;/tr&gt;
             &lt;/table&gt;
            &lt;center&gt;
           &lt;article&gt;        
           &lt;/article&gt;
           &lt;/center&gt;
       &lt;/aside&gt;
         &lt;aside class="right"&gt;
             &lt;p class="titlebannerbox" align="right"&gt;Salary&lt;/p&gt;
             &lt;p class="asidelogo"&gt;&lt;/p&gt;
             &lt;hr&gt;
             &lt;table cellspacing="0" style="border-spacing:-5px;"&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td style="width: 10%"&gt;Ruby&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;$109k&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Object C&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;$108k&lt;/td&gt;
               &lt;/tr&gt; 
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Python&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;$100k&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Java&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;$94k&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;C++&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;$93k&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Javascript&lt;/td&gt;
                 &lt;td style="text-align: right;"&gt;$91k&lt;/td&gt;
               &lt;/tr&gt;
                 &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;C&lt;/td&gt;
                 &lt;td style="text-align: right;"&gt;$90k&lt;/td&gt;
               &lt;/tr&gt;
             &lt;/table&gt;          
         &lt;/aside&gt;
         &lt;aside style="color:black"&gt;  
           &lt;p class="titlebannerbox" align="right"&gt;Popularity&lt;/p&gt;   
           &lt;p class="asidelogo"&gt;&lt;/p&gt;
           &lt;hr&gt;
             &lt;table cellspacing="0" style="border-spacing:-5;"&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td style="width: 10%"&gt;Python&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;31.2%&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Java&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;19.6%&lt;/td&gt;
               &lt;/tr&gt; 
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;C++&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;9.8%&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;C#&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;7.4%&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Ruby&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;7.1%&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Javascript&lt;/td&gt;
                 &lt;td style="text-align: right;"&gt;6.5%&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;C&lt;/td&gt;
                 &lt;td style="text-align: right;"&gt;6.1%&lt;/td&gt;
               &lt;/tr&gt;
           &lt;/table&gt;
         &lt;/aside&gt;
         &lt;aside class="right"&gt;
             &lt;p class="titlebannerbox" align="right"&gt;Salary&lt;/p&gt;
             &lt;p class="asidelogo"&gt;&lt;/p&gt;
             &lt;hr&gt;
             &lt;table cellspacing="0" style="border-spacing:-5px;"&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td style="width: 10%"&gt;Ruby&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;$109k&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Object C&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;$108k&lt;/td&gt;
               &lt;/tr&gt; 
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Python&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;$100k&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Java&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;$94k&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;C++&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;$93k&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Javascript&lt;/td&gt;
                 &lt;td style="text-align: right;"&gt;$91k&lt;/td&gt;
               &lt;/tr&gt;
                 &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;C&lt;/td&gt;
                 &lt;td style="text-align: right;"&gt;$90k&lt;/td&gt;
               &lt;/tr&gt;
             &lt;/table&gt;          
         &lt;/aside&gt;
         &lt;aside&gt;
           &lt;p class="titlebannerbox" align="right"&gt;Difficulty&lt;/p&gt;
           &lt;p class="asidelogo"&gt;&lt;/p&gt;
           &lt;hr&gt;
           &lt;table cellspacing="0" style="border-spacing:0;"&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td style="width: 30%;"&gt;C&lt;/td&gt;
                 &lt;td style="text-align: right;vertical-align: sub;"&gt;*****&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;C+++&lt;/td&gt;
                 &lt;td style="text-align: right;"&gt;*****&lt;/td&gt;
               &lt;/tr&gt; 
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Java&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;****&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;C#&lt;/td&gt;
                 &lt;td style="text-align: right;"&gt;***&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Javascript&lt;/td&gt;
                 &lt;td style="text-align: right"&gt;**&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Python&lt;/td&gt;
                 &lt;td style="text-align:right;"&gt;*&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr style="line-height: 15px;"&gt;
                 &lt;td&gt;Ruby&lt;/td&gt;
                 &lt;td style="text-align: right;"&gt;*&lt;/td&gt;
               &lt;/tr&gt;
           &lt;/table&gt;
         &lt;/aside&gt;
         &lt;footer&gt;
             &lt;center&gt;
                &lt;img src="logo.png" width="70px" height="70px" vertical-align="bottom"/&gt;
             &lt;/center&gt;
         &lt;/footer&gt;
       &lt;/div&gt; &lt;!-- End of Wrapper--&gt;
         
          
  
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>