title: header overlapping other body elements;
body: <p>Trying to give some margin between div.header and div.Main_2, but the div.header overlaps div.Main_2 because of "position: fixed;". 
  I tried with "margin-bottom: 50px;", but it still remains superimposed. </p>
  
  <p><strong>Is there any way to make the margin with the least possible code, without take out the "position: fixed;"?</strong></p>
  
  <p>CSS:</p>
  
  <pre><code>.header {
    font-size: 10px;
    text-align: left;
    background-color: #333333;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px;
    border-bottom: 3px solid #4eb151;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin-bottom: 50px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="Main_1"&gt;
      &lt;div class="header"&gt;
         MyHeader
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="Main_2"&gt;
      &lt;input type="file" name="BttFile" accept="" required class="PathInputFile"&gt;
      &lt;input type="submit" class="SubmitStyle_1" value="Upload" name="Upload"&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/pmKGe.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pmKGe.jpg" alt="MyHeader-Img"></a></p>