Whitespace between main and footer

Topic: Whitespace between main and footer

iliketheinterwebs pro asked 5 years ago

I have whitespace/gap between my main and footer sections and I am not sure why. I don't want the whitespace. TIA for your help.

Start your code here

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Permitting for PMNM</title>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  <link href="css/bootstrap.min.css" rel="stylesheet">  <link href="css/mdb.min.css" rel="stylesheet">  <link href="css/front-page.css" rel="stylesheet"> </head>  <body>  <header>  <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar"> <div class="container"> <a class="navbar-brand" href="#"> <strong>PMNM Permitting</strong> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent-7"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">FAQ</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav>   <div class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url('/img/sea-turtle.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">  <div class="mask rgba-black-strong d-flex justify-content-center align-items-center">  <div class="container">  <div class="row">  <div class="col-md-12 white-text text-center"> <h1 class="display-3 mb-0 pt-md-5 pt-5 white-text wow fadeInDown" data-wow-delay="0.3s">Papahānaumokuākea <a class="white-text">Permitting</a> </h1> <h5 class="text-uppercase pt-md-5 pt-sm-2 pt-5 pb-md-5 pb-sm-3 pb-5 white-text wow fadeInDown" data-wow-delay="0.3s">Create, submit, and track your permits, all in one place.</h5> <div class="wow fadeInDown" data-wow-delay="0.3s"> <a class="btn blue-gradient btn-lg">Log In</a> <a class="btn peach-gradient btn-lg">Sign Up</a> </div> </div>  </div>  </div>  </div>  </div>  </header>  <footer class="page-footer font-small stylish-color-dark pt-4 mt-4">  <div class="container text-center text-md-left">  <div class="row">  <div class="col-md-4 mx-auto">  <h5 class="font-weight-bold text-uppercase mt-3 mb-4">About Papahānaumokuākea Online Permitting</h5> <p>This online permitting system allows you to apply to conduct activities within Papahānaumokuākea Marine National Monument. </p> </br> <p>Once your application is completed using this online permitting system, you will be able to manage your applications, obtain status updates, and subsequently report on your permitting activities.</p> </div>  <hr class="clearfix w-100 d-md-none">  <div class="col-md-2 mx-auto">  <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Instructions</h5> <ul class="list-unstyled"> <li> <a href="#!">Link 1</a> </li> <li> <a href="#!">Link 2</a> </li> <li> <a href="#!">Link 3</a> </li> <li> <a href="#!">Link 4</a> </li> </ul> </div>  <hr class="clearfix w-100 d-md-none">  <div class="col-md-2 mx-auto">  <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Permit Deadlines</h5> <ul class="list-unstyled"> <li> <a href="#!">Link 1</a> </li> <li> <a href="#!">Link 2</a> </li> <li> <a href="#!">Link 3</a> </li> <li> <a href="#!">Link 4</a> </li> </ul> </div>  <hr class="clearfix w-100 d-md-none">  <div class="col-md-2 mx-auto">  <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Contact Us</h5> <ul class="list-unstyled"> <li> <a href="#!">Link 1</a> </li> <li> <a href="#!">Link 2</a> </li> <li> <a href="#!">Link 3</a> </li> <li> <a href="#!">Link 4</a> </li> </ul> </div>  </div>  </div>  <hr>  <ul class="list-unstyled list-inline text-center py-2"> <li class="list-inline-item"> <h5 class="mb-1">Create an account for free</h5> </li> <li class="list-inline-item"> <a href="#!" class="btn peach-gradient btn-lg">Sign up</a> </li> </ul>  <hr>  <ul class="list-unstyled list-inline text-center"> <li class="list-inline-item"> <a class="btn-floating btn-fb mx-1"> <i class="fa fa-facebook"> </i> </a> </li> <li class="list-inline-item"> <a class="btn-floating btn-tw mx-1"> <i class="fa fa-twitter"> </i> </a> </li> </ul>   <div class="footer-copyright text-center py-3">© 2017 Copyright: <a href="https://papahanaumokuakea.gov"> Papahānaumokuākea Marine National Monument</a> </div>  </footer>    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>  <script type="text/javascript" src="js/popper.min.js"></script>  <script type="text/javascript" src="js/bootstrap.min.js"></script>  <script type="text/javascript" src="js/mdb.min.js"></script> <script> // Animations initialization new WOW().init(); </script> </body> </html>

Bartłomiej Malanowski staff commented 5 years ago

Could you please attach a screenshot of this whitespace?

Add comment

lede premium answered 5 years ago