title: margin / padding not working
body: <p>I have 2 main divs within a main div. I've tried adding margin and padding with a large number to test, but it just work work. Why can't I add margin / padding between them? Please help.</p>
  <h2>HTML</h2>
  <pre><code> &lt;div id=&quot;mainWrapper&quot;&gt;
      
      &lt;header class=&quot;container&quot;&gt;
      
          &lt;div id=&quot;nav2&quot; class=&quot;container&quot;&gt;
              &lt;ul class=&quot;nav2a&quot;&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Login&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Quick Search&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Advanced Search&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;English &lt;i class=&quot;fa fa-caret-down&quot;&gt;&lt;/i&gt;&lt;/p&gt;&lt;/a&gt;
                      &lt;ul class=&quot;nav2b&quot;&gt;
                          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;French&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Italian&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Spanish&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;German&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt; &lt;!-- end nav2 --&gt;
          
      &lt;/header&gt;
      
      &lt;div class=&quot;clearfloat&quot;&gt;&lt;/div&gt;
  
     &lt;div id=&quot;fullNav&quot; class=&quot;container&quot;&gt;
              
          &lt;div id=&quot;logoSymbol&quot;&gt;
              &lt;a href=&quot;#&quot;&gt;
                  &lt;img src=&quot;images/gpj-baker-symbol.png&quot; width=&quot;54&quot; height=&quot;51&quot; /&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          
          &lt;div id=&quot;logoText&quot;&gt;
              &lt;a href=&quot;#&quot;&gt;
                  &lt;img src=&quot;images/gpj-baker-text.png&quot; width=&quot;200&quot; height=&quot;30&quot; /&gt;
              &lt;/a&gt;
         &lt;/div&gt;
  
          &lt;div class=&quot;clearfloat&quot;&gt;&lt;/div&gt;
  
          &lt;div id=&quot;mainNav&quot;&gt;
               &lt;ul class=&quot;nav1a&quot;&gt;
                   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Brands&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Fabrics &amp; Wallcoverings&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Where To Buy&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Press&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          
          &lt;div class=&quot;clearfloat&quot;&gt;&lt;/div&gt;
  
          &lt;div class=&quot;hr&quot;&gt;&lt;hr/&gt;&lt;/div&gt;
          
          &lt;div class=&quot;clearfloat&quot;&gt;&lt;/div&gt;
  
      &lt;/div&gt; &lt;!-- end fullNav --&gt;
                                      
      &lt;div class=&quot;clearfloat&quot;&gt;&lt;/div&gt;
  
      &lt;div id=&quot;brandContainer&quot; class=&quot;container&quot;&gt;
         
          &lt;div id=&quot;breadcrumbs&quot; class=&quot;container&quot;&gt;
              &lt;ul class=&quot;breadInfo&quot;&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;brands.html&quot; class=&quot;currentPg&quot;&gt;Brands&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt; &lt;!-- end breadIcrumbs --&gt;
                                      
          &lt;div class=&quot;clearfloat&quot;&gt;&lt;/div&gt;
  
          &lt;div class=&quot;brandList&quot;&gt;
          
              &lt;div class=&quot;brandImg&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;http://placehold.it/442x294&quot; /&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class=&quot;brandCopy&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;
                      &lt;img src=&quot;images/gpj-baker-text.png&quot; width=&quot;162&quot; height=&quot;25&quot; /&gt;
                  &lt;/a&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui ex, pharetra a commodo maximus, luctus id ligula. Curabitur tempus arcu ac orci fringilla varius.&lt;/p&gt;
                  
                  &lt;p&gt;Cras hendrerit, mi interdum varius luctus, nisl lectus accumsan mauris, eu tristique arcu massa et arcu. Vivamus venenatis purus blandit, placerat urna eget, faucibus mauris.&lt;/p&gt;
                  &lt;a href=&quot;#&quot;&gt;Explore &lt;i class=&quot;fa fa-caret-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/div&gt;
              
          &lt;/div&gt; &lt;!-- end brandList --&gt;
  
          &lt;div class=&quot;clearfloat&quot;&gt;&lt;/div&gt;
  
          &lt;div class=&quot;brandList&quot;&gt;
          
              &lt;div class=&quot;brandImg&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;http://placehold.it/442x294&quot; /&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class=&quot;brandCopy&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;
                      &lt;img src=&quot;images/gpj-baker-text.png&quot; width=&quot;162&quot; height=&quot;25&quot; /&gt;
                  &lt;/a&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui ex, pharetra a commodo maximus, luctus id ligula. Curabitur tempus arcu ac orci fringilla varius.&lt;/p&gt;
                  
                  &lt;p&gt;Cras hendrerit, mi interdum varius luctus, nisl lectus accumsan mauris, eu tristique arcu massa et arcu. Vivamus venenatis purus blandit, placerat urna eget, faucibus mauris.&lt;/p&gt;
                  &lt;a href=&quot;#&quot;&gt;Explore &lt;i class=&quot;fa fa-caret-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/div&gt;
              
          &lt;/div&gt; &lt;!-- end brandList --&gt;
          
      &lt;/div&gt;&lt;!-- end brandContainer --&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;
  vertical-align: baseline;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} table {border-collapse: collapse; border-spacing: 0;}
  
  body {
      font-size: 16px;
      text-decoration: none;
  }
  
  h1, h2, h3, h4, h5, h6, p, a {
      font-family: &quot;Lato&quot;, Helvetica, Arial, sans-serif;
  }
  
  .clearfloat {
      clear: both;
  }
  
  #mainWrapper {
      margin: 0 auto;
      max-width: 1280px;
      vertical-align: middle;
      width: 100%;
  }
  
  .container {
      margin: 0 auto;
      max-width: 980px;
      vertical-align: middle;
      width: 100%;
  }
  
  header .container {
      display: block;
      float: right;
  }
  
  header #nav {
      float: right;
  }
  
  div.hr {
      border: 0.01em solid #676767;
  }
  
  #nav2 {
      float: right;
      font-size: 12px;
      font-weight: 400;
      margin: 0 auto;
      padding: 5px 0;
      text-transform: uppercase;
  }
  
      #nav2 a:link,
      #nav2 a:visited {
          color: #676767;
      }
      
      #nav2 a:hover {
          color: #4284b8;
      }
  
      #nav2 li {
          vertical-align: middle;
          float:left;
      }
  
      #nav2 li,
      #nav2 li a {
          display: inline-block;
          text-decoration: none;
      }
      
      #nav2 li a {
          padding: 5px 10px;
      }
  
      #nav2 li ul {
          display: none;
          position: absolute;
      }
      
      #nav2 li:hover ul {
          display: block;
      }
      
      #nav2 li ul li {
          clear: both;    
      }
      
      #nav2 .nav2a {
          float: right;
      }
  
  #fullNav {
      text-align: center;
  }
  
      #fullNav #logoSymbol,
      #fullNav #logoText {
          display: inline;
          margin: 0 auto;
          padding: 0 5px;
      }
      
  #mainNav {
      font-size: 12px;
      font-weight: 400;
      margin: 0 auto;
      padding: 5px 0;
      text-transform: uppercase;
  }
  
      #mainNav a:link,
      #mainNav a:visited {
          color: #676767;
      }
      
      #mainNav a:hover {
          color: #4284b8;
      }
  
      #mainNav li {
          vertical-align: middle;
      }
  
      #mainNav li,
      #mainNav li a {
          display: inline-block;
          text-decoration: none;
      }
      
      #mainNav li a {
          padding: 5px 25px;
      }
          
      #mainNav li ul {
          display: none;
          position: absolute;
      }
      
      #mainNav li:hover ul {
          display: block;
      }
      
      #mainNav li ul li {
          clear: both;    
      }
  
  #footerNav {
      float: right;
      font-size: 12px;
      font-weight: 400;
      margin: 0 auto;
      padding: 5px 0;
      text-transform: uppercase;
  }
  
      #footerNav a:link,
      #footerNav a:visited {
          color: #676767;
      }
      
      #footerNav a:hover {
          color: #6e8878;
      }
  
      #footerNav li {
          vertical-align: middle;
          float:left;
      }
  
      #footerNav li,
      #footerNav li a {
          display: inline-block;
          text-decoration: none;
      }
      
      #footerNav li a {
          padding: 5px 10px;
      }
          
      #footerNav li ul {
          display: none;
          position: absolute;
      }
      
      #footerNav li:hover ul {
          display: block;
      }
      
  #nav3b {
      display: none;
      clear: both;    
  }
  
  #nav3b a:hover {
      display: block;
  }
      
      #footerNav .nav3a {
          float: right;
      }
  
  #breadcrumbs {
      float: right;
      font-size: 9px;
      font-weight: 400;
      margin: 0 auto;
      text-transform: uppercase;
  }
  
      #breadcrumbs .currentPg {
          color: #676767;
          font-weight:bold;
      }
  
      #breadcrumbs a:link,
      #breadcrumbs a:visited {
          color: #8b8b8b;
      }
      
      #breadcrumbs a:hover {
          color: #4284b8;
      }
  
      #breadcrumbs li {
          vertical-align: middle;
          float:left;
      }
          
          #breadcrumbs li {
              padding: 0 .25em 0 0;
          }
          
          #breadcrumbs li:after {
              content: &quot; | &quot;;
              display: inline-block;
              font-size: 100%;
              margin: 0 0 0 1.25em;
          }
          
          #breadcrumbs li:last-child:after {
              content: &quot; &quot;;
          }
          
          #breadcrumbs li,
          #breadcrumbs li a {
              display: inline-block;
              text-decoration: none;
          }
          
          #breadcrumbs li a {
              padding: 5px 10px;
          }
      
          #breadcrumbs li a:last-child {
              padding-right: 0;
          }
          
      #breadcrumbs .breadInfo {
          float: right;
          padding-bottom: 5px;
      }
  
  .brandList {
      display: inline;
      overflow: auto;
      text-align: center;
      vertical-align: middle;
      width: 100%;
  }
  
  .brandImg {
      display: block;
      float: left;
      margin: 0 auto;
      max-width: 442px;
      padding-right: 8px;
      vertical-align: middle;
      width: 50%;
  }
  
  .brandCopy {
      display: block;
      float: left;
      font-size: 12px;
      font-weight: 400;
      margin: 0 auto;
      overflow: hidden;
      padding-left: 8px;
      position: relative;
      text-transform: uppercase;
      vertical-align: middle;
      width: 50%;
  }
  
      .brandCopy p {
          display: block;
          font-size: 16px;
          text-transform: none;
          line-height: 150%;
      }
  
      .brandCopy .currentPg {
          color: #676767;
          font-weight:bold;
      }
  
      .brandCopy a:link,
      .brandCopy a:visited {
          color: #4284b8;
          font-weight: bold;
          text-decoration: none;
      }
      
      .brandCopy a:hover {
          color: #959595;
      }
      
      .brandCopy .breadInfo {
          float: right;
          padding-bottom: 5px;
      }
  
      .brandCopy a img {
          margin: 0 auto;
          margin-bottom: 16px;
          max-width: 442px;
          text-align: center;
      }
  
      .brandCopy p {
          margin-bottom: 16px;
          overflow: auto;
          text-align: left;
      }
  </code></pre>
  <p>EDIT: Full CSS added.</p>