title: Margin of html element defaulting to fill width of containing div, cannot override
body: <p>I'm a fairly novice web developer and I'm having a very fundamental problem that I would really appreciate some help with:</p>
  
  <p>No matter what width I set any elements within a certain containing div, safari and Chrome both add extra margins that fill the width of the div. If I specify them to have 0 margins the css is overridden. For example, I have the following</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="element1"&gt;
      ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I set this as the css:</p>
  
  <pre><code>.container{
      background-color:#ffffff;
      margin-left:7.5%;
      margin-right:7.5%;
      padding:30px;
      color:#505050;
      line-height:1.5;
      font-size:14px;
  }
  
  .element1{
      max-width:50%;
      margin: 0px 0px 0px 0px;
  }
  </code></pre>
  
  <p>element1 has a width of 50% of the containing element, but it then has an extra margin to the right that fills up the rest of the width of the containing element. Why is this happening and how do I set this right-margin to 0?</p>
  
  <p>Thanks!</p>