title: How to remove the white bar in the middle of my page?
body: <p>I put a background image and I'm using a card at the middle of the page. I've a white bar that come across all the screen and I don't know how to remove it.</p>
  <p>Here is a screenshot:</p>
  <p><a href="https://i.stack.imgur.com/XGDLF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XGDLF.png" alt="enter image description here" /></a></p>
  <p>Here is my code</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-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="fr"&gt;
  
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;meta name="description" content=""&gt;
          &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"&gt;
      &lt;/head&gt;
  
      &lt;style type="text/css"&gt;
          @media (min-width: 768px) {
              html{
                  background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
                  background-repeat: no-repeat;
                  background-size: 100%;
              }
          }
      &lt;/style&gt;
  
      &lt;body&gt;
          &lt;div class="container" style="background-color: transparent;"&gt;
              &lt;main style="background-color: transparent;"&gt;
                  &lt;div class="col-md-12" style="background-color: transparent;"&gt;
                      &lt;div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red"&gt;                     
                          &lt;div class="card-body" &gt;                            
                              &lt;h6 class="card-title text-center"&gt;Connexion&lt;/h6&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="exampleInputEmail1"&gt;Email&lt;/label&gt;
                                  &lt;input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"&gt;
                              &lt;/div&gt;&lt;br/&gt;
                              &lt;div class="text-center"&gt;
                                  &lt;a class="btn btn-primary" href="index.html"&gt;Se connecter&lt;/a&gt;
                              &lt;/div&gt;
                           &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/main&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>