title: How do i add text under the boxes in HTML
body: <blockquote>
    <p>Im trying to add text under these boxes in my HTML, but they keep
    messing up the design of the website, any suggestions on how to
    approach it, I'm going to add the current picture and how it should
    look like and also my HTML code below</p>
  </blockquote>
  
  <p>PS. Sorry for attaching linked images as stack overflow doesn't let me add images directly.</p>
  
  <p><a href="https://i.stack.imgur.com/0Vs96.jpg" rel="nofollow noreferrer">My code image</a></p>
  
  <p><a href="https://i.stack.imgur.com/EOuMt.png" rel="nofollow noreferrer">How it should look like image</a></p>
  
  <blockquote>
    <p>Heres my code below</p>
  </blockquote>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;title&gt;Daddy Roys&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;section id="nav-bar"&gt;
          &lt;nav class="navbar navbar-expand-lg navbar-light bg-light nav-background"&gt;
              &lt;a class="navbar-brand" href="index.html"&gt;
                  &lt;img src="img/logo.png" width="100" height="100" alt=""&gt;
                &lt;/a&gt;
              &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
                &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
                &lt;ul class="navbar-nav"&gt;
                  &lt;li class="nav-item active"&gt;
                    &lt;a class="nav-link" href="#top"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link" href="#footer"&gt;Contact&lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/nav&gt;
      &lt;/section&gt;
  
      &lt;section id="banner"&gt;
          &lt;div class="trial"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-8"&gt;
                  &lt;p class="promo"&gt;Your home&lt;br&gt;away from home&lt;/p&gt;
                  &lt;img src="img/table1.PNG" alt="" class="mini-pic mini-pic1"&gt;
                  &lt;img src="img/table2.PNG" alt="" class="mini-pic"&gt;
                  &lt;img src="img/table3.PNG" alt=""class="mini-pic"&gt;
              &lt;/div&gt;
              &lt;div class="col-4"&gt;
                  &lt;img src="img/lamp.png" class="img-fluid" alt=""&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/section&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <blockquote>
    <p>Heres my CSS</p>
  </blockquote>
  
  <pre><code>  .navbar {
    background-image: url("../img/background.png");
  }
  
  nav .navbar-nav li a {
    color: white !important;
    margin-top: 50px;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  #banner {
    color: black;
    padding-top: 5%;
  }
  
  .promo{
  margin-top: -75px;
  
  }
  
  .col-4 {
    width: 400px;
    padding-top: 80px;
  }
  
  .mini-pic {
    width: 25%;
    padding: 10px;
    padding-top: 100px;
    margin-top: -30px;
  }
  
  .trial{
    font-size: 120px;
    font-weight: 600;
    padding-left: 120px;
  }
  </code></pre>