title: Make a bootstrap 4 container-fluid go full bleed to edge of browser window
body: <p>I'm using bootstrap 4 and I'm trying to get a bootrap container and its content to go full width and bleed all the way to the view port.</p>
  
  <p>My initial solution added padding off the side of the screen which lead to the window scrolling right 15px.</p>
  
  <p>My second partial solution is based on this answer for bootstrap 3: <a href="https://stackoverflow.com/questions/37978307/bootstrap-container-fluid-padding/50005919">Bootstrap container-fluid padding</a></p>
  
  <p>With this approach I get the bleed to the left of the screen, but 30px gap remains on the right. I can't see what I should have done to get the full width container working.</p>
  
  <p>Here's code that fully represents the problem. The content that I want to go to the edge of screen happens to be a map. I doubt that's relevant, but have included in case:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  
          &lt;script type="text/javascript"&gt;
          var map
          var geocoder
  
          function initMap() {
              // received letters array
  
              // create map object
              map = new google.maps.Map(document.getElementById('map'), {
                  zoom: 3,
                  mapTypeId: 'terrain'
              })
  
              var userLocation = "London"
              geocoder = new google.maps.Geocoder()
              geocoder.geocode({'address': "London"}, function(results, status) {
                  if (status === 'OK') {
                      map.setCenter(results[0].geometry.location);
                  } else {
                      console.log('Geocode was not successful for the following reason: ' + status)
                  }
              })
  
  
              google.maps.event.addDomListener(window, 'load', initMap)
          }
          &lt;/script&gt;
  
          &lt;style&gt;
              .container-fluid.full-width {
                  padding:0px;
              }
  
              .change-margins {
                  margin-left:-15px;
                  margin-right:-15px;
              }
          &lt;/style&gt;
  
      &lt;/head&gt;
      &lt;body style="background-color:blue;"&gt;
          &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
            nav     
          &lt;/nav&gt;
  
          &lt;div id="content" class="container-fluid full-width"&gt;
  
              &lt;div id="map-panel" class="container-fluid change-margins"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-12"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-12 m-2"&gt;
                                  &lt;h1&gt;Title&lt;/h1&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;style&gt;
                              /* Always set the map height explicitly to define the size of the div
                              * element that contains the map. */
                              #map {
                                  height: 100%;
                                  min-height: 300px;
                              }
                              /* Optional: Makes the sample page fill the window. */
                              html, body {
                                  height: 100%;
                                  margin: 0;
                                  padding: 0;
                              }
                          &lt;/style&gt;
  
                          &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key={api-key}=initMap"&gt;&lt;/script&gt;
  
                          &lt;div id="map"&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="container-fluid"&gt;
                  &lt;div class="row mt-3"&gt;
                      &lt;div class="col-sm"&gt;
                          &lt;h1&gt;Content below map&lt;/h1&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What should I have done in order to get the content to meet the edge of the browser window?</p>