title: How to fix sidebar extending the page too far
body: <p>I've added max-width but still, whenever my side-nav comes out my page doesn't fit precisely on the screen! I'd like all elements to fit on the page responsively. If the side-nav comes out, I want the page-content box to fit on the page in the same ratio of dimensions, just smaller. What I've put in hasn't worked. The page extends by how much the navbar is, but also, all elements don't fit in the window neatly. I am making this into a dashboard so I'd like it to all show on one page.</p>
  
  <pre><code>{% extends 'base.html' %}
  
  {% block title %}
  &lt;title&gt;Visualisation&lt;/title&gt;
  {% endblock %}
  
  {% block body %}
  
  &lt;div id="wrapper"&gt;
  
      &lt;!-- Sidebar --&gt;
      &lt;div id="sidebar-wrapper"&gt;
          &lt;div class="header-bar-wrapper"&gt;
              &lt;span&gt;Pet Owner Visualisation&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="count-wrapper"&gt;
              &lt;svg id='inner-ring' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"&gt;&lt;path d="M25.025,49.625c-0.276,0-0.5-0.224-0.5-0.5c0-0.275,0.224-0.5,0.5-0.5c4.151-0.004,8.232-1.1,11.803-3.169  c0.236-0.139,0.544-0.06,0.684,0.182c0.139,0.239,0.057,0.545-0.182,0.684C33.606,48.479,29.353,49.621,25.025,49.625L25.025,49.625  z M12.964,46.413c-0.085,0-0.17-0.021-0.25-0.066c-3.737-2.156-6.856-5.267-9.022-8.996c-0.139-0.238-0.057-0.545,0.182-0.684  c0.241-0.138,0.545-0.057,0.684,0.182c2.078,3.578,5.071,6.563,8.657,8.631c0.239,0.139,0.321,0.444,0.183,0.684  C13.305,46.323,13.137,46.413,12.964,46.413z M45.901,37.558c-0.085,0-0.171-0.021-0.25-0.067c-0.239-0.138-0.321-0.443-0.183-0.683  c2.064-3.573,3.156-7.656,3.156-11.808l-0.001-0.101c0-0.276,0.224-0.5,0.5-0.5s0.5,0.224,0.5,0.5l0.001,0.086  c0,4.342-1.138,8.598-3.291,12.322C46.241,37.468,46.073,37.558,45.901,37.558z M0.875,25.525c-0.276,0-0.5-0.198-0.5-0.475h0.5  l-0.5-0.022c-0.001-4.337,1.128-8.578,3.265-12.292c0.139-0.239,0.444-0.321,0.683-0.184c0.239,0.138,0.322,0.443,0.184,0.683  C2.458,16.798,1.375,20.866,1.375,25C1.375,25.276,1.152,25.525,0.875,25.525z M45.851,13.356c-0.172,0-0.339-0.089-0.432-0.248  c-2.087-3.575-5.088-6.553-8.677-8.613c-0.239-0.137-0.322-0.443-0.185-0.683c0.138-0.24,0.441-0.321,0.683-0.185  c3.74,2.146,6.867,5.25,9.042,8.976c0.14,0.238,0.059,0.544-0.18,0.684C46.023,13.334,45.937,13.356,45.851,13.356z M12.878,4.637  c-0.172,0-0.34-0.089-0.433-0.249c-0.139-0.238-0.058-0.544,0.181-0.684c3.718-2.165,7.97-3.316,12.296-3.33c0,0,0.001,0,0.001,0  c0.275,0,0.499,0.223,0.5,0.499s-0.222,0.5-0.499,0.501c-4.15,0.013-8.229,1.117-11.796,3.194  C13.05,4.615,12.964,4.637,12.878,4.637z"&gt;&lt;/path&gt;&lt;/svg&gt;
              &lt;svg id='outer-ring' xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 100 100" version="1.1" x="0px" y="0px"&gt;&lt;title&gt;PDP-Icon-Circle&lt;/title&gt;&lt;g transform="translate(0,-270.54167)"&gt;&lt;ellipse style="" cx="95.109993" cy="321.81519" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="94.051575" cy="330.34082" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="91.393639" cy="338.5105" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="87.228989" cy="346.02518" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="81.718971" cy="352.61722" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="75.066666" cy="358.05396" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="67.507515" cy="362.13641" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="59.307789" cy="364.69803" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="50.771435" cy="365.65091" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="42.207973" cy="364.99423" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="33.923241" cy="362.72937" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="26.221169" cy="358.92639" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="19.378035" cy="353.7327" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="13.634921" cy="347.34256" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="9.1994591" cy="339.98349" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="6.2463722" cy="331.91412" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="4.890008" cy="323.4296" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="5.1496711" cy="314.8421" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="7.0256963" cy="306.45844" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="10.453431" cy="298.58093" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="15.308842" cy="291.49374" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="21.415846" cy="285.4509" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="28.560387" cy="280.67938" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="36.479439" cy="277.35001" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="44.884468" cy="275.57993" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="53.471874" cy="275.43243" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="61.932163" cy="276.91086" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="69.96019" cy="279.96378" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="77.266365" cy="284.48059" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="83.588326" cy="290.29752" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="88.693733" cy="297.20853" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="92.39238" cy="304.96426" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;ellipse style="" cx="94.557289" cy="313.27911" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"&gt;&lt;/ellipse&gt;&lt;/g&gt;&lt;/svg&gt;
              &lt;svg id='innermost-circle' xmlns="http://www.w3.org/2000/svg" data-name="Layer 21" viewBox="0 0 32 32" x="0px" y="0px"&gt;&lt;title&gt;Circle&lt;/title&gt;&lt;circle cx="16" cy="16" r="14.5"&gt;&lt;/circle&gt;&lt;/svg&gt;
              &lt;svg id='vis-logo' height='100px' width='100px'  fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"&gt;&lt;g&gt;&lt;path d="M34.777,14.713c0-5.6,4.54-10.139,10.139-10.139c5.599,0,10.138,4.539,10.138,10.139s-4.54,10.138-10.138,10.138   C39.317,24.851,34.777,20.313,34.777,14.713z M70.98,51.486l-5.762-11.87c-3.732-7.721-6.25-13.021-13.685-13.021H38.298   c-7.436,0-9.952,5.3-13.686,13.021l-6.851,14.117c-1.018,2.084-0.146,4.585,1.938,5.602c2.083,1.018,4.608,0.153,5.625-1.931   l9.474-18.298l-6.923,34.396h6.923v17.366c0,2.517,2.04,4.558,4.557,4.558s4.557-2.041,4.557-4.558V73.502h2.007v17.366   c0,2.517,2.041,4.558,4.558,4.558s4.557-2.041,4.557-4.558V73.502h6.923l-6.923-34.396c0,0,9.632,18.593,9.722,18.731   C66.166,54.656,69.144,52.146,70.98,51.486z M84.321,89.862V71.273c-2.124,2.372-6.327,2.451-6.327,2.451s-4.201-0.079-6.326-2.451   v18.589c0,0-2.723,0.236-2.723,2.959c0,1.257,1.35,2.604,2.975,2.604c3.373,0,5.193-1.303,5.193-3.592s0-8.915,0-8.915   c0.025-0.394,0.191-0.841,0.891-0.841c0.666,0,0.837,0.479,0.872,0.808c0,0,0,6.604,0,8.948s1.82,3.592,5.193,3.592   c1.625,0,2.974-1.348,2.974-2.604C87.043,90.099,84.321,89.862,84.321,89.862z M70.041,89.4c0,0,0-11.238,0-11.244   c-11.454-4.287-4.538,11.706-4.538,11.706s-2.723,0.236-2.723,2.959c0,1.258,1.351,2.604,2.975,2.604   c1.332,0,2.345-0.615,2.345-0.615C65.957,91.235,69.26,89.4,70.041,89.4z M91.518,87.026c-0.517,1.645-1.031,2.836-1.031,2.836   s2.723,0.236,2.723,2.959c0,1.258-1.35,2.604-2.975,2.604c-1.332,0-2.345-0.615-2.345-0.615c2.144-3.575-1.159-5.41-1.941-5.41   c0,0-0.001-11.238,0.001-11.244c4.693-1.757,6.301-0.107,6.564,2.451C98.349,82.25,100,77.426,100,77.426   C99.577,84.504,92.601,86.724,91.518,87.026z M68.994,62.844c0.846-1.813,2.851-5.826,3.793-5.378c0,0-3.102,6.471-3.102,7.292   c0,0.811,0.307,2.631,1.455,4.304c1.041,1.519,3.075,3.327,6.854,3.327c6.898,0,8.309-6.02,8.309-7.631   c0-0.77-3.117-7.285-3.117-7.285c0.936-0.508,2.96,3.547,3.813,5.371c0.883,1.893,3.531,2.901,3.531-1.45   c0-4.242-4.667-8.262-6.307-8.515c-1.211-0.186-2.213,0.868-2.602,1.377c-0.986-0.432-2.187-0.644-3.637-0.644   c-1.457,0-2.662,0.214-3.652,0.648c-0.4-0.524-1.373-1.565-2.563-1.382c-1.64,0.253-6.308,4.272-6.308,8.515   C65.461,65.745,68.111,64.736,68.994,62.844z M26.958,94.582c0,0,0.235,0.557,1.041,0.557c1.473,0,2.287-1.221,2.287-2.362   c0-2.469-2.47-2.683-2.47-2.683s7.772-14.509-2.616-10.619c-0.002,0.006-0.002,10.199-0.002,10.199   C25.905,89.674,28.903,91.338,26.958,94.582z M1.023,66.094c3.537,1.004,2.444,4.575,1.383,7.111   c-1.613,3.862-1.743,6.973-0.388,9.242c1.052,1.761,2.726,2.523,3.813,2.845c0.827,2.514,2.053,4.802,2.053,4.802   s-2.47,0.214-2.47,2.683c0,1.142,0.813,2.362,2.288,2.362c0.804,0,1.041-0.557,1.041-0.557c-1.945-3.244,1.05-4.908,1.76-4.908   c0,0,0-10.193-0.002-10.199c-4.223-1.581-5.446-0.12-5.408,2.17c-1.813-1.368-1.227-4.485-0.038-7.333   c1.423-3.403,1.673-5.991,0.764-7.914c-0.691-1.459-1.989-2.458-3.972-3.053c-0.759-0.227-1.557,0.204-1.785,0.964   C-0.167,65.066,0.262,65.878,1.023,66.094z M9.354,92.981c0,1.179,1.267,2.444,2.792,2.444c3.167,0,4.876-1.171,4.876-3.371   c0-0.938,0-2.6,0-4.198c-1.701-0.364-2.977-1.875-2.977-3.685c0.209,1.882,1.829,2.926,3.769,2.926   c1.938,0,3.557-1.044,3.766-2.926c0,1.785-1.239,3.277-2.903,3.667c0,1.612,0,3.29,0,4.216c0,2.148,1.708,3.371,4.876,3.371   c1.526,0,2.792-1.266,2.792-2.444c0-2.558-2.555-2.78-2.555-2.78V77.012c0,0-1.637,2.056-5.939,2.056   c-4.304,0-5.941-2.056-5.941-2.056v13.189C11.91,90.201,9.354,90.424,9.354,92.981z M10.325,69.247   c-0.219,0.605-0.337,1.248-0.337,1.911c0,3.656,3.561,6.62,7.956,6.62c4.393,0,7.955-2.964,7.955-6.62   c0-0.663-0.12-1.306-0.338-1.911c0.432-1.37,0.93-4.323-0.997-7.969l-3.717,3.716c-0.899-0.294-4.908-0.294-5.809,0l-3.716-3.716   C9.395,64.924,9.894,67.877,10.325,69.247z"&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;
              &lt;div id="count"&gt;
                  &lt;span id='text'&gt;Connections:&lt;/span&gt;
                  &lt;span&gt;17,000,345&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;ul class="sidebar-nav"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Businesses&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Export&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="logo-box"&gt;
              &lt;img id=logo src="static/img/M.png" alt=""&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Page Content --&gt;
      &lt;div id="page-content-wrapper"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="row"&gt;
                  &lt;div class='col-lg-12'&gt;
                      &lt;a href="#" class="btn btn-success" id="menu-toggle"&gt;Toggle Sidebar&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;script&gt;
          $("#menu-toggle").click( function (e){
              e.preventDefault()
              $("#wrapper").toggleClass("menuDisplayed")
          });
      &lt;/script&gt;
      &lt;script&gt;
          var enterHandler = function(){
              $("#count").show();
              $("#vis-logo").hide();
              };
  
          var leaveHandler = function(){
              $("#count").hide();
              $("#vis-logo").show();
              };
  
          $("#innermost-circle").hover(enterHandler, leaveHandler);
      &lt;/script&gt;
          &lt;script&gt;
              var enterHandler = function(){
                  $("#vis-logo").hide();
                  $("#count").show();
                  };
  
              var leaveHandler = function(){
                  $("#vis-logo").show();
                  $("#count").hide();
                  };
  
              $("#vis-logo").hover(enterHandler, leaveHandler);
          &lt;/script&gt;
  {% endblock %}
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>    /* Main */
  
  #wrapper {
      max-width: 100%;
      max-height: 100%;
  }
  
  /* Sidebar */
  #sidebar-wrapper {
      z-index: 1;
      position: absolute;
      background-color: rgba(0, 0, 160, 0.9);
      width: 0;
      height: 100%;
      overflow-y: hidden;
      border: 2px solid #00d7b9;
  }
  
  /* Main content */
  #page-content-wrapper {
      max-width: 100%;
      max-height: 100%;
  }
  
  .row {
      background-color: white;
  }
  
  #page-content-wrapper .col-lg-12 {
      border-radius: 10px;
      width: 100%;
      height: 100%;
      background-color: gainsboro;
      position: absolute;
      margin: 10px;
      padding: 15px;
      border: 3px solid gray;
      max-width: 90%;
      max-height: 90%;
  }
  
  /* Change the width of the sidebar to display it*/
  
  #wrapper.menuDisplayed #sidebar-wrapper{
      width: 250px;
  }
  
  #wrapper.menuDisplayed #page-content-wrapper{
      padding-left: 250px;
  }
  
  /* Sidebar styling */
  .sidebar-nav {
      padding: 0;
      list-style: none;
  }
  
  .sidebar-nav li{
      text-indent: 20px;
      line-height: 40px;
  }
  
  .sidebar-nav li a {
      display: block;
      text-decoration: none;
      color: honeydew;
  }
  
  .sidebar-nav li a:hover{
      background: #8080cf;
  }
  
  /* nav-bar header */
  .header-bar-wrapper {
      color:rgba(0, 0, 160, 1);
      background-color:  rgba(0, 215, 185, 1);
      text-align: center;
      font-weight: 600;
  }
  
  /* Counts */
  #outer-ring {
      height: 150px;
      width: 150px;
      display: block;
      margin: auto;
      margin-top: 10px;
      margin-bottom: 10px;
      stroke: white!important;
      color: white!important;
      -webkit-animation: clockwiseSpin 36s infinite linear;
  }
  
  @-webkit-keyframes clockwiseSpin {
      from {
              -webkit-transform: rotate(0deg);
      }
      to {
              -webkit-transform: rotate(359deg);
      }
  }
  
  
  #outer-ring ellipse {
      fill: white;
      rx: 1.5px;
      ry: 1.5px;
  }
  
  #inner-ring {
      height: 124px;
      width: 124px;
      position: absolute;
      display: block;
      fill: white;
      stroke: none;
      margin: auto;
      margin-top: 10px;
      top: 37px;
      left: 0;
      right: 0;
      text-align: center;
      -webkit-animation: antiClockwiseSpin 28s infinite linear;
  }
  
  @-webkit-keyframes antiClockwiseSpin {
      from {
          -webkit-transform: rotate(359deg);
      }
      to {
          -webkit-transform: rotate(0deg);
      }
  }
  
  #innermost-circle {
      position: absolute;
      display: block;
      fill: rgba(0, 215, 185, 1);
      height: 120px;
      width: 120px;
      opacity: 0.7;
      left: 0;
      right: 0;
      margin: auto;
      text-align: center;
      margin-top: 10px;
      top: 39px;
  }
  
  #vis-logo {
          position: absolute;
          display: block;
          fill: rgba(255, 255, 255, 1);
          height: 70px;
          width: 70px;
          left: 0;
          right: -5px;
          margin: auto;
          text-align: center;
          margin-top: 10px;
          top: 58px;
      }
  
      #count {
          position: absolute;
          text-align: center;
          margin: 0;
          position: absolute;
          top: 12.5%;
          left: 50%;
          transform: translate(-50%, -50%);
      }
  
      #count span {
          color: white;
          display: inline-block;
          opacity: 1;
      }
  
      #logo {
          height: 50px;
          width: 50px;
          position: absolute;
          text-align: center;
          margin: 0;
          position: absolute;
          bottom: 12.5%;
          left: 50%;
          transform: translate(-50%, -50%);
      }
  </code></pre>