title: CSS child element producing a margin the full width of parent
body: <p>building an overlay containing a stylised container for some text, however this container seems to be producing a margin which when combined with the elements normal width takes up the entire parent element width. According to chrome dev tools its the <code>.flipcontainer</code>element that is causing this.</p>
  
  <p>It's really weird behaviour and I can't figure out why its behaving in this way.</p>
  
  <p>If I wanted to place content to the right of the container for example, I would not be able to because of this margin being produced.</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>.flipcontainer {
    height: 230px;
    width: 150px;
  }
  .flipcalender {
    border: 1px solid #dddddd;
    border-radius: 25px;
    margin: 0 auto;
    margin-top: 0.2px;
    background: linear-gradient(white, #f4f2f2);
  }
  .mmouter {
    width: 100%;
    height: 100%;
    border: 1.5px solid #dddddd;
  }
  .mmmiddle {
    width: 98%;
    height: 98%;
  }
  .mminner {
    width: 98%;
    height: 98%;
    background: linear-gradient(white, #f4f2f2);
    position: relative;
  }
  .mmbreaker {
    width: 99%;
    background-color: white;
    height: 2px;
    position: absolute;
    z-index: 1;
    top: 115px;
  }
  #mmlightbox {
    display: block;
    width: 400px;
    height: auto;
    position: fixed;
    top: 30%;
    left: 40%;
    z-index: 999;
    background-color: white;
    padding: 10px 20px 10px 0px;
    /* margin-right: 239px; */
    margin-top: -100px;
    margin-left: -150px;
    border: solid 2px #f21c0a;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='mmlightbox'&gt;
    &lt;div class='flipcontainer'&gt;
      &lt;div class='flipcalender mmouter'&gt;
        &lt;div class='flipcalender mmmiddle'&gt;
          &lt;div class='flipcalender mminner'&gt;
            &lt;p class='daysremaining'&gt;&lt;/p&gt;
            &lt;p&gt;days&lt;/p&gt;
            &lt;div class='mmbreaker'&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>