title: Bootstrap problem with line-up of left sidebar & page content
body: <p>I'm trying to convert an existing site (and make it responsive) using Bootstrap (4.3.1) - and learn Bootstrap as I go through it.</p>
  <ul>
  <li>I have a <strong>top-Nav</strong></li>
  <li>then a <strong>middle portion</strong> - containing:
  <ul>
  <li>a <strong>Sidebar</strong> (on the left)</li>
  <li>&amp; <strong>page content</strong> on the right</li>
  </ul>
  </li>
  <li>then at the bottom a <strong>Footer</strong>.</li>
  </ul>
  <p>But try as I might (&amp; I've spend 2 days reading Bootstrap's examples, &amp; Stack Overflow Qs) - I can't get the middle section to be same width as, and to line-up with, the header - without ridiculous amounts of css.</p>
  <p>I'm sure/hopeful? there's a easy way ;) What am I not doing/doing wrong?</p>
  <p>Here's my code (inline code/colors just to help me see where elements are)</p>
  <pre><code> &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
  
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;
  &lt;script src=&quot;bootstrap.min.js&quot; integrity=&quot;sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  
  &lt;head&gt;
  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
  &lt;title&gt;Untitled 1&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body color=&quot;pink&quot;&gt;
  &lt;!-- Page container --&gt;
  &lt;div id=&quot;HomePage&quot;class=&quot;container&quot;&gt;
      &lt;nav class=&quot;navbar sticky-top navbar-light bg-light&quot;&gt;
        &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Sticky top&lt;/a&gt;
      &lt;/nav&gt;
      &lt;!-- Middle Section of the Page page --&gt;
      &lt;div class=&quot;container w-100 p-0&quot;&gt;
          &lt;div class=&quot;container row w-100 p-0&quot;&gt;
              &lt;!-- Start of left Sidebar --&gt;
              &lt;div class=&quot;col-1&quot; style=&quot;background-color:yellow;&quot;&gt;
                      Sidebar
              &lt;/div&gt;
              &lt;!-- Righthand side content --&gt;
              &lt;div class=&quot;col-11&quot; style=&quot;background-color:green;&quot;&gt;
                  MAIN PAGE CONTENT
                  &lt;p&gt;xxxx&lt;/p&gt;&lt;p&gt;xxxx&lt;/p&gt;&lt;p&gt;xxxx&lt;/p&gt;&lt;p&gt;xxxx&lt;/p&gt;&lt;p&gt;xxxx&lt;/p&gt;&lt;p&gt;xxxx&lt;/p&gt;&lt;p&gt;xxxx&lt;/p&gt;&lt;p&gt;xxxx&lt;/p&gt;&lt;p&gt;xxxx&lt;/p&gt;&lt;p&gt;xxxx&lt;/p&gt;&lt;p&gt;xxxx&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Page Footer --&gt;
      &lt;nav class=&quot;navbar sticky-top navbar-light bg-light&quot; color=&quot;blue&quot;&gt;
        &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Footer at bottom of page&lt;/a&gt;
      &lt;/nav&gt;
  &lt;/div&gt;  &lt;!-- End of Page container --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>PS - Rationale: I need the middle portion full width, as on some pages there are images at top-right of the page that should line-up with right-hand edge of header,
  And the sidebar contains full width images, with almost no padding etc.</p>