title: How to make a header's size be equal in both margins?
body: <p>I'm new to CSS, started a week and a half ago, and I'm having an issue that I have a hard time solving a problem. I need my webpage to look
  <a href="https://i.stack.imgur.com/rwEWW.png" rel="nofollow noreferrer">Like this</a>, I have tried lots of stuff but I can't come up with a solution yet. It doesn't look right, it doesn't look 50%-50%</p>
  <pre><code>&lt;body&gt;
      &lt;header class= &quot;header&quot;&gt;
              &lt;div class=&quot;box-1&quot;&gt;
                  &lt;h1&gt;TOP STUDENTS&lt;/h1&gt;
                  &lt;b&gt;Historic best averages&lt;/b&gt;
              &lt;/div&gt;
      &lt;/header&gt;
  
  
  /*Now to CSS*/
  .header{
      display: inline-block;
      top:2vw;
      left:2vh;
      width:50vh;
      right:2vh;
      height:5vh;
      margin:5% 25%;
      position:relative;
  }
  
  .box-1{
      min-width:400px;
      min-height:60px;
      padding-top:5px;
      padding-bottom:5px;
      text-align:center;
      box-sizing:border-box;
      border: 4px rgba(24, 26, 1, 0.705) solid;
      font-size:24px;
      display:inline-block;
      background-color: rgba(200, 220, 150, 0.7);
      box-shadow: inset 0 0 15px rgba(0,0,0,.5);
  }
  
  .box-1:hover{
      width:400px;
      height:110%;
      font-size:30px;
      background-color:rgba(226, 208, 40, 0.822);
      transition: 2s;
  }
  </code></pre>
  <p>I have two monitors with different resolutions and when I swap the page it destroys itself but the objective is not correcting that since that's not what the exercises ask for.
  I already tried a few suggested solutions here but nothing seems to work out. I'm doing something very wrong apparently
  <a href="https://i.stack.imgur.com/VYheA.png" rel="nofollow noreferrer">enter image description here</a>
  The page was doing fine until I started working to correct it and make the header look like it should (orange is the header), it isn't right though.
  Thanks
  <strong>VERY important clarification</strong>: I can not use flexbox because the exercise explicitly tells me not to.</p>