title: Header not spanning whole page
body: <p><strong>Context:</strong> I am working through a tutorial on PHP with MySQL - currently making a pretend website. HTML/CSS knowledge is assumed in the tutorial, which I don't have.  Everything is going great, except I can't figure out how to make my header span the entire width of the page.</p>
  
  <p><strong>What I have tried:</strong> First I tried to troubleshoot the issue on my own - I went to the CSS I am using and tried adjusting the 'header' and 'footer' width from 980px to 100% and test it, but no dice. The CSS was a downloadable file in the tutorial, not something I wrote, and 980px is how it was set when I downloaded it. After unsuccessfully tinkering on my own I turned to google, I found this question already asked <a href="https://i.stack.imgur.com/4yRV7.png" rel="nofollow noreferrer">here</a>, but the solution was something I had already tried. It is strange because at first in the tutorial, when the tutor ran the webpage - his was only partial page like mine but then all of the sudden in one of the videos his header was spanning the whole page. I checked the exercise files at that point in the video but his CSS file / header /footer page are all identical to mine. I tried to read a bit about the interaction between the CSS and the HTML etc, and I get the general idea but still didn't learn enough to fix my issue.</p>
  
  <p><strong>Code:</strong>
  I have a header/footer .php that I include at the start/end (respectively) of every .php page visible from the browser. Here they are:</p>
  
  <p>Header</p>
  
  <pre><code>&lt;?php   if(!isset($page_title)) { $page_title = 'Staff Area'; } ?&gt;
  
  &lt;!doctype html&gt;
  
  &lt;html lang="en"&gt;   
    &lt;head&gt;
      &lt;title&gt;GBI - &lt;?php echo h($page_title); ?&gt;&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" media="all" href="&lt;?php echo url_for('/stylesheets/staff.css'); ?&gt;" /&gt;   
     &lt;/head&gt;
  
    &lt;body&gt;
      &lt;header&gt;
        &lt;h1&gt;GBI Staff Area&lt;/h1&gt;
      &lt;/header&gt;
  
      &lt;navigation&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="&lt;?php echo url_for('/staff/index.php'); ?&gt;"&gt;Menu&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/navigation&gt;
  </code></pre>
  
  <p>Footer</p>
  
  <pre><code>&lt;footer&gt;
    &amp;copy; &lt;?php echo date('Y'); ?&gt; Globe Bank
  &lt;/footer&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Selected Portion of my CSS (Recall from above: I have tinkered with width values. h1 block originally didn't have a width value, but I tried that on my own) </p>
  
  <pre><code>html {
    height: 100%;
    width: 100%;
  }
  
  body {
    height: 980px;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  header {
    width: 100%;
    height: 40px;
    margin: 0 0 10px 0;
    padding: 0;
    background: #0055DD;
    color: white;
  }
  
  header h1 {
    width: 100%;
    margin: 0;
    padding: 5px;
    font-size: 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
  }
  </code></pre>
  
  <p>Example of a page where I am loading the header and footer:</p>
  
  <pre><code>&lt;?php require_once('../../private/initialize.php'); ?&gt;
  
  &lt;?php $page_title = 'Staff Menu'; ?&gt;
  &lt;?php include(SHARED_PATH . '/staff_header.php'); ?&gt;
  
  &lt;div id="content"&gt;
      &lt;div id="main-menu"&gt;
          &lt;h2&gt;Main Menu&lt;/h2&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="&lt;?php echo url_for('/staff/subjects/index.php');?&gt;"&gt;Subjects&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="&lt;?php echo url_for('/staff/pages/index.php');?&gt;"&gt;Pages&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;?php include(SHARED_PATH . '/staff_footer.php'); ?&gt;
  </code></pre>
  
  <p>I understand the above is not exactly what constitutes an MWE, and I apologize for that. Because I am new, I don't know where in my collection of interacting files the problem might be lurking - so I didn't know how to condense it down to an MWE without possibly hiding where the problem was.</p>
  
  <p><strong>Question:</strong></p>
  
  <blockquote>
    <p>Why does my header not span the whole page?</p>
  </blockquote>
  
  <p>Will post a screen shot of what it looks like when I run it if anyone would like.</p>
  
  <p><strong>Edit:</strong> 
  Screenshot of the page after loading. This page is the last quoted section of php code above:
  <a href="https://i.stack.imgur.com/4yRV7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4yRV7.png" alt="enter image description here"></a></p>