title: How can I bring box middle of the website without breaking header?
body: <p>I have tried to fix a lot of time but I can't figure it out. I want to separate header (navbar) and box but when I use margin on the box, the header (navbar) move with the box, But I just want to margin the box only. The position of the header position should not be effected.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>.box {
    width: 450px;
    background: rgba(0,0,0,0.4);
    padding: 40px;
    text-align: center;
    margin: auto;
  margin-top: 100px;
    color: white;
    font-family: 'Century Gothic', sans-serif;
  }
  </code></pre>