title: How to extend the border to full width whilst the body is set at 77%
body: <p>I have set all elements to be middle of the page fitting at 77%. Using this code here:</p>
  
  <pre><code>body{
   margin: auto;
   padding: 0;
   width: 77%;
   font-family: arial;
  }
  </code></pre>
  
  <p>I have added a bottom border with a blue colour and it is also at width of 77%.</p>
  
  <p>How can I extend the blue border to go all the way to fit the page? But keep all other elements at 77%?</p>
  
  <p>I have attached a snippet, I know it doesn't work great, but I am currently practicing on my knowledge of borders, and this is what I have come across to.</p>
  
  <p>I just need the blue line to run across the whole page.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
   margin: auto;
   padding: 0;
   width: 77%;
   font-family: arial;
  }
  #head{
   border-bottom: 2px solid blue;
   overflow: hidden
  }
  
  .container{
   width: 100%;
  }
  
  #head ul{
   margin: 0;
   padding: 0;
   float: right;
   padding-bottom: 10px;
  
  }
  #head ul li{
   list-style: none;
   display: inline-block;
   font-size: 20px;
   padding-left: 20px;
  
  }
  #head a{
   text-decoration: none;
   text-transform: uppercase;
  }
  
  #head header{
   text-transform: uppercase;
   font-weight: bold;
   font-size: 30px;
   margin-top: 10px;
  }
  
  #head .container header{
   color: #0D1D6B;
   text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
  }
  
  #head .container span{
   color: #fff; 
   text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;practise&lt;/title&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
   &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
   &lt;section id="head"&gt;
    &lt;div class="container"&gt;
     &lt;header&gt;Holiday &lt;span&gt;resort&lt;/span&gt;&lt;/header&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="index.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="index.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  
    &lt;/div&gt;
  
   &lt;/section&gt;
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>