.navbar-brand{

padding-right: 20px;
padding-left: 20px;

}
.logohspace{

  margin-left: 40px;
  margin-right: 40px;
}

.sidebar {
  z-index: 100; /* Behind the navbar */
  padding: 30px;
  padding-right: 50px;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.hamilton {
  border:3px
  groove black;

}

.footer-backdrop{
  background-color: white;
}

.orange-truck {
  border:3px
  groove black;

}

/* Nav Bar */

.navbar {
  background:white;
  border-bottom: 0.2px solid black;
}

/* footer */

/*Bottom of the page*/

.logo-images {
  text-align: center;
  padding-bottom: 7px;
  padding-top: 7px;
  border-top: 0.1px solid darkgrey;

}

.history-title {
    background-color: #f5f2f2;
    padding: 5px;
}

/*description under the title */


/*Bottom of the page*/
.page-footer {
  background-color: #222;
  color: #ccc;
  padding: 30px 0 0px;

  /*Mackenzie's Comments
    In the CSS properties I put some code to keep the footer at the bottom of your page
    This is so when you input text into the body of the webpage, it is not overlapped
    by the footer. This was one of the issues with the overlapping. I've just added
    these properties into the class, page-footer*/

    width: 100%; /* makes sure the footer goes across the entire page */
    left: 0; /* keeps the footer center */
    right: 0; /* also keeps the footer center */
    position: absolute; /* allows you to scroll to the bottom of the page to find the footer. if you want the footer sticky, set position to fixed*/

}
.footer-copyright {
  color: #BFBFBF;
  padding: 10px;
}

@media only screen and (max-width: 991px) {
  .nav-pills{
    display: inline-block;
  }
  .nav-item{
    padding: 2px;
  }
}

.title {
  background-color: #138496;
  color: white;
  padding: 3px;
  text-align: center;
}