title: HTML/CSS - Automatically adjust size of element for different screen size(s)
body: <p>I'm brushing up my HTML/CSS skills and trying to build a website  where elements adjust automatically to different screen sizes; as an example, for the <code>header</code> I'm using the following code:</p>
  
  <pre><code>#header{
      position: absolute;
      top: 10%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
      width: 500px;
      height: 100px;
      border:thin solid black;
  }​
  </code></pre>
  
  <p>With the header im hoping to keep the element centered and adjust to the size of different screens, however my code above is flawed because</p>
  
  <ol>
  <li>It is not centered </li>
  <li>If I give it a width of 500px, i assume it will stay a fixed 500px and not adjust to different resolutions...</li>
  </ol>
  
  <p>Here is an image of what it looks like, notice the element is not centered.
  <img src="https://i.stack.imgur.com/fLbV1.png" alt="enter image description here"></p>
  
  <p><strong>What am I doing wrong here?</strong></p>