title: Placing an <h3> over a form/div
body: <p>I've got this HTML code and i want to place an  above this but, whatever i am doing, it is always placed to left side of the form.</p>
  
  <p>I know it's a very basic question but i am not that experienced in CSS. How am i supposed to do this? Is there a w3-class that will do this for me? </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>.bookbox{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #FFFFFF;
    margin: 16px !important;
    box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
  }
  
  .bookcard{
    margin-top: 120px !important;
    margin-bottom: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #FFFFFF;
    clear: both;
  }
  
  .float-left {
    float: left !important;
  }
  
  .m-1 {
    margin: 0.25rem !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bookbox"&gt;
      &lt;h3&gt;I'd like this to place above the bookcard&lt;/h3&gt;
      &lt;div class="bookcard"&gt;
          &lt;form class="w3-container" method="GET" action="{{config('app.PATH_TO_INDEX', '')}}/findCar"&gt;
              &lt;div class="float-left m-1"&gt;
                  &lt;input type="text" name="Standort" list="Standorte" class="w3-input w3-border" placeholder="Standort"&gt;
                      &lt;datalist id="Standorte"&gt;
                          &lt;option value="example"&gt;&lt;/option&gt;
                      &lt;/datalist&gt;
              &lt;/div&gt;
              &lt;div class="float-left m-1"&gt;
                  &lt;input type="text" name="Startdatum" class="date w3-input w3-border" id="f0date" placeholder="Startdatum"&gt;
              &lt;/div&gt;
              &lt;div class="float-left m-1"&gt;
                  &lt;input type="text" name="Enddatum" class="date w3-input w3-border {{ $errors-&gt;has('Enddatum') ? 'border-danger' : '' }}" id="f1date" placeholder="Enddatum"&gt;
              &lt;/div&gt;
              &lt;div class="float-left m-1"&gt;
                  &lt;button type="submit" class="w3-button margin-small signalButton w3-hover-text-blue w3-blue-grey w3-hover-blue-grey w3-hover-opacity" id="submit0"&gt;Fahrzeug finden&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;        
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for your help</p>