Reputation: 1

How to remove a whitespace below a footer?

I'm having trouble getting rid of whitespace under my footer. If you need more info please ask. This is my first time using Stack Overflow. I have tried changing the padding and margin, changing the position, and Changing the height of the footer. margin: 0; did not work, nor did padding: 0;. Here is an Image showing what's happening.

/*Import Open Sans*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap')

:root {
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  --text-primary: #b6b6b6;
  --text-secondary: #ececec;
  --bg-primary: #23232e;
  --bg-secondary: #141418;
}

main {
  min-height: calc(100vh - 40px);
}

body::-webkit-scrollbar {
  width: 0.25rem;
}

body::-webkit-scrollbar-track {
  background: #333;
}

body::-webkit-scrollbar-thumb {
  background: #141418;
}

#president {
  border-right: 1px #333 solid;
}

#vicePresident {
  border-right: 1px #333 solid;
}

footer {
  position: relative;
  left: 0;
  bottom: 0;
  height:100%;
  width: 100%;
  background-color: #333;
  color: white;
  margin-bottom: 0;
}

  <!DOCTYPE html>
  <html lang="en">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- Primary Meta Tags -->
    <title>Cleveland Coding Club</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="title" content="Cleveland Coding Club">
    <meta name="description" content="The official Cleveland Coding Club Website.">
    <!-- Start Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- End Bootstrap -->
    <!-- Link Javascript Files -->
    <script src="app.js"></script>
    <script src="index.js"></script>
    <!-- Link Main CSS File -->
    <link rel="stylesheet" href="style.css">


  </head>

  <body>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
            </button>
          <a class="navbar-brand" href="index.php">CLEVELAND CODING CLUB</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li><a href="index.php">Home</a></li>
            <li><a href="events.php">Events</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">About
                            <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="about.php#adviser">Adviser</a></li>
                <li><a href="about.php#leaders">Leaders</a></li>
              </ul>
            </li>
            <li><a href="leadership.php">Leadership</a></li>
            <li><a href="links.php">Social Media/Links</a></li>

            <?php
                            if($_SESSION['username'] == 'admin') {
                                echo("<button class='btn btn-danger navbar-btn' onclick='goToWebmaster();'>Webmaster</button>");
                            }
                        ?>

          </ul>
          <p class="navbar-text" id="version">Version: 0.3.2.2</p>
          <ul class="nav navbar-nav navbar-right">
            <p class="navbar-text">Welcome,

              <?php 
                                echo $_SESSION['username'] ;
                            ?>
            </p>
            <?php
                                // If session username == Guest then show login button, also if username !isset.
                                if ($_SESSION['username'] == 'Guest') {
                                    echo("<li><a href='login.php'><span class='glyphicon glyphicon-log-in'></span> Login</a></li>");
                                } elseif ($_SESSION['username'] != 'Guest') {
                                    echo("<li><a href='logout.php'><span class='glyphicon glyphicon-log-out'></span> Logout</a></li>");
                                }
                            ?>



          </ul>
        </div>
      </div>
    </nav>
    <main>
      <section id="adviser" class="text-center">
        <div class="container-fluid">
          <h1 class="h1">Adviser</h1>
          <div class="row">
            <div class="col-md-12">
              <h1 class="h1">Random Name</h1>
              <img src="img/advisors/Name.png" alt="Random Name" class="img-thumbnail rounded mx-auto d-block">
              <h2 class="h2">About Me</h2>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, a sequi asperiores! Saepe, reprehenderit, sequi, dignissimos praesentium quae culpa dicta est eligendi voluptatem esse animi minus assumenda ea corporis itaque.</p>
            </div>
          </div>
        </div>
      </section>
      <hr/>
      <section id="leaders" class="text-center">
        <div class="container-fluid">
          <h1 class="h1">Leaders</h1>
          <div class="row">
            <div class="col-md-4" id="president">
              <h1 class="h1">President</h1>
              <h2 class="h2">Random Name</h2>
              <img src="img/leaders/Name.png" alt="Random Name" class="img-thumbnail rounded mx-auto d-block">
              <h3 class="h3">About Me</h3>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, provident, ipsum, architecto facere dolorem blanditiis quibusdam ad quisquam aperiam et voluptate obcaecati animi tempora illum repellat reprehenderit nulla at nostrum?</p>
            </div>
            <div class="col-md-4" id="vicePresident">
              <h1 class="h1">Vice President</h1>
              <h2 class="h2">Random Name</h2>
              <img src="img/leaders/name.jpeg" alt="Sarah Clodfelter" class="img-thumbnail rounded mx-auto d-block">
              <h3 class="h3">About Me</h3>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, maxime, iste, repellendus animi architecto fugiat facilis voluptas iusto aperiam qui tenetur amet consequuntur ad placeat sint earum vel repellat. Facere.</p>
            </div>
            <div class="col-md-4" id="secretary">
              <h1 class="h1">Secretary</h1>
              <h2 class="h2">Random Name</h2>
              <img src="img/sample.png" alt="sample-img" class="img-thumbnail rounded mx-auto d-block">
              <h3 class="h3">About Me</h3>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, architecto, natus totam explicabo est ducimus similique molestiae magnam aperiam aliquid dolor ipsam reprehenderit neque sequi ea voluptates consequuntur voluptatibus sit.</p>
            </div>
          </div>
        </div>
      </section>
    </main>
    <footer class="text-center">
      <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia reprehenderit deleniti quae ex provident quibusdam harum illum. At, eaque, animi aperiam officia deleniti voluptates et? Corporis, iusto eligendi minus vero.</h3>
    </footer>
  </body>

  </html>

Upvotes: 0

Answers (3)

Bleau

Reputation: 155

Its happening because the h3 element within the footer has a built in margin which extends beyond the borders of the div. Adding some padding to the div will fix it.

footer {
  background-color: #333;
  color: white;
  padding: 1px;
}

Upvotes: 1

Linda Kadz

Reputation: 361

I just changed the height- you can edit it to fit your needs, I hope this helps.

/*Import Open Sans*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap')

:root {
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  --text-primary: #b6b6b6;
  --text-secondary: #ececec;
  --bg-primary: #23232e;
  --bg-secondary: #141418;
}

main {
  min-height: calc(100vh - 40px);
}

body::-webkit-scrollbar {
  width: 0.25rem;
}

body::-webkit-scrollbar-track {
  background: #333;
}

body::-webkit-scrollbar-thumb {
  background: #141418;
}

#president {
  border-right: 1px #333 solid;
}

#vicePresident {
  border-right: 1px #333 solid;
}

footer {
  position: relative;
  left: 0;
  bottom: 0;
  height: 70vh;
  width: 100%;
  background-color: #333;
  color: white;
}

  <!DOCTYPE html>
  <html lang="en">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- Primary Meta Tags -->
    <title>Cleveland Coding Club</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="title" content="Cleveland Coding Club">
    <meta name="description" content="The official Cleveland Coding Club Website.">
    <!-- Start Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- End Bootstrap -->
    <!-- Link Javascript Files -->
    <script src="app.js"></script>
    <script src="index.js"></script>
    <!-- Link Main CSS File -->
    <link rel="stylesheet" href="style.css">


  </head>

  <body>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
            </button>
          <a class="navbar-brand" href="index.php">CLEVELAND CODING CLUB</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li><a href="index.php">Home</a></li>
            <li><a href="events.php">Events</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">About
                            <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="about.php#adviser">Adviser</a></li>
                <li><a href="about.php#leaders">Leaders</a></li>
              </ul>
            </li>
            <li><a href="leadership.php">Leadership</a></li>
            <li><a href="links.php">Social Media/Links</a></li>

            <?php
                            if($_SESSION['username'] == 'admin') {
                                echo("<button class='btn btn-danger navbar-btn' onclick='goToWebmaster();'>Webmaster</button>");
                            }
                        ?>

          </ul>
          <p class="navbar-text" id="version">Version: 0.3.2.2</p>
          <ul class="nav navbar-nav navbar-right">
            <p class="navbar-text">Welcome,

              <?php 
                                echo $_SESSION['username'] ;
                            ?>
            </p>
            <?php
                                // If session username == Guest then show login button, also if username !isset.
                                if ($_SESSION['username'] == 'Guest') {
                                    echo("<li><a href='login.php'><span class='glyphicon glyphicon-log-in'></span> Login</a></li>");
                                } elseif ($_SESSION['username'] != 'Guest') {
                                    echo("<li><a href='logout.php'><span class='glyphicon glyphicon-log-out'></span> Logout</a></li>");
                                }
                            ?>



          </ul>
        </div>
      </div>
    </nav>
    <main>
      <section id="adviser" class="text-center">
        <div class="container-fluid">
          <h1 class="h1">Adviser</h1>
          <div class="row">
            <div class="col-md-12">
              <h1 class="h1">Random Name</h1>
              <img src="img/advisors/Name.png" alt="Random Name" class="img-thumbnail rounded mx-auto d-block">
              <h2 class="h2">About Me</h2>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, a sequi asperiores! Saepe, reprehenderit, sequi, dignissimos praesentium quae culpa dicta est eligendi voluptatem esse animi minus assumenda ea corporis itaque.</p>
            </div>
          </div>
        </div>
      </section>
      <hr/>
      <section id="leaders" class="text-center">
        <div class="container-fluid">
          <h1 class="h1">Leaders</h1>
          <div class="row">
            <div class="col-md-4" id="president">
              <h1 class="h1">President</h1>
              <h2 class="h2">Random Name</h2>
              <img src="img/leaders/Name.png" alt="Random Name" class="img-thumbnail rounded mx-auto d-block">
              <h3 class="h3">About Me</h3>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, provident, ipsum, architecto facere dolorem blanditiis quibusdam ad quisquam aperiam et voluptate obcaecati animi tempora illum repellat reprehenderit nulla at nostrum?</p>
            </div>
            <div class="col-md-4" id="vicePresident">
              <h1 class="h1">Vice President</h1>
              <h2 class="h2">Random Name</h2>
              <img src="img/leaders/name.jpeg" alt="Sarah Clodfelter" class="img-thumbnail rounded mx-auto d-block">
              <h3 class="h3">About Me</h3>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, maxime, iste, repellendus animi architecto fugiat facilis voluptas iusto aperiam qui tenetur amet consequuntur ad placeat sint earum vel repellat. Facere.</p>
            </div>
            <div class="col-md-4" id="secretary">
              <h1 class="h1">Secretary</h1>
              <h2 class="h2">Random Name</h2>
              <img src="img/sample.png" alt="sample-img" class="img-thumbnail rounded mx-auto d-block">
              <h3 class="h3">About Me</h3>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, architecto, natus totam explicabo est ducimus similique molestiae magnam aperiam aliquid dolor ipsam reprehenderit neque sequi ea voluptates consequuntur voluptatibus sit.</p>
            </div>
          </div>
        </div>
      </section>
    </main>
    <footer class="text-center">
      <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia reprehenderit deleniti quae ex provident quibusdam harum illum. At, eaque, animi aperiam officia deleniti voluptates et? Corporis, iusto eligendi minus vero.</h3>
    </footer>
  </body>

  </html>

Upvotes: 0

Spectric

Reputation: 31987

All <h> tags have margins. To remove them, simply use margin:0 like so:

/*Import Open Sans*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap')

:root {
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  --text-primary: #b6b6b6;
  --text-secondary: #ececec;
  --bg-primary: #23232e;
  --bg-secondary: #141418;
}

main {
  min-height: calc(100vh - 40px);
}

body::-webkit-scrollbar {
  width: 0.25rem;
}

body::-webkit-scrollbar-track {
  background: #333;
}

body::-webkit-scrollbar-thumb {
  background: #141418;
}

#president {
  border-right: 1px #333 solid;
}

#vicePresident {
  border-right: 1px #333 solid;
}

footer {
  position: relative;
  left: 0;
  bottom: 0;
  height:100%;
  width: 100%;
  background-color: #333;
  color: white;
  margin-bottom: 0;
}

<!DOCTYPE html>
  <html lang="en">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- Primary Meta Tags -->
    <title>Cleveland Coding Club</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="title" content="Cleveland Coding Club">
    <meta name="description" content="The official Cleveland Coding Club Website.">
    <!-- Start Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- End Bootstrap -->
    <!-- Link Javascript Files -->
    <script src="app.js"></script>
    <script src="index.js"></script>
    <!-- Link Main CSS File -->
    <link rel="stylesheet" href="style.css">


  </head>

  <body>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
            </button>
          <a class="navbar-brand" href="index.php">CLEVELAND CODING CLUB</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li><a href="index.php">Home</a></li>
            <li><a href="events.php">Events</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">About
                            <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="about.php#adviser">Adviser</a></li>
                <li><a href="about.php#leaders">Leaders</a></li>
              </ul>
            </li>
            <li><a href="leadership.php">Leadership</a></li>
            <li><a href="links.php">Social Media/Links</a></li>

            <?php
                            if($_SESSION['username'] == 'admin') {
                                echo("<button class='btn btn-danger navbar-btn' onclick='goToWebmaster();'>Webmaster</button>");
                            }
                        ?>

          </ul>
          <p class="navbar-text" id="version">Version: 0.3.2.2</p>
          <ul class="nav navbar-nav navbar-right">
            <p class="navbar-text">Welcome,

              <?php 
                                echo $_SESSION['username'] ;
                            ?>
            </p>
            <?php
                                // If session username == Guest then show login button, also if username !isset.
                                if ($_SESSION['username'] == 'Guest') {
                                    echo("<li><a href='login.php'><span class='glyphicon glyphicon-log-in'></span> Login</a></li>");
                                } elseif ($_SESSION['username'] != 'Guest') {
                                    echo("<li><a href='logout.php'><span class='glyphicon glyphicon-log-out'></span> Logout</a></li>");
                                }
                            ?>



          </ul>
        </div>
      </div>
    </nav>
    <main>
      <section id="adviser" class="text-center">
        <div class="container-fluid">
          <h1 class="h1">Adviser</h1>
          <div class="row">
            <div class="col-md-12">
              <h1 class="h1">Random Name</h1>
              <img src="img/advisors/Name.png" alt="Random Name" class="img-thumbnail rounded mx-auto d-block">
              <h2 class="h2">About Me</h2>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, a sequi asperiores! Saepe, reprehenderit, sequi, dignissimos praesentium quae culpa dicta est eligendi voluptatem esse animi minus assumenda ea corporis itaque.</p>
            </div>
          </div>
        </div>
      </section>
      <hr/>
      <section id="leaders" class="text-center">
        <div class="container-fluid">
          <h1 class="h1">Leaders</h1>
          <div class="row">
            <div class="col-md-4" id="president">
              <h1 class="h1">President</h1>
              <h2 class="h2">Random Name</h2>
              <img src="img/leaders/Name.png" alt="Random Name" class="img-thumbnail rounded mx-auto d-block">
              <h3 class="h3">About Me</h3>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, provident, ipsum, architecto facere dolorem blanditiis quibusdam ad quisquam aperiam et voluptate obcaecati animi tempora illum repellat reprehenderit nulla at nostrum?</p>
            </div>
            <div class="col-md-4" id="vicePresident">
              <h1 class="h1">Vice President</h1>
              <h2 class="h2">Random Name</h2>
              <img src="img/leaders/name.jpeg" alt="Sarah Clodfelter" class="img-thumbnail rounded mx-auto d-block">
              <h3 class="h3">About Me</h3>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, maxime, iste, repellendus animi architecto fugiat facilis voluptas iusto aperiam qui tenetur amet consequuntur ad placeat sint earum vel repellat. Facere.</p>
            </div>
            <div class="col-md-4" id="secretary">
              <h1 class="h1">Secretary</h1>
              <h2 class="h2">Random Name</h2>
              <img src="img/sample.png" alt="sample-img" class="img-thumbnail rounded mx-auto d-block">
              <h3 class="h3">About Me</h3>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, architecto, natus totam explicabo est ducimus similique molestiae magnam aperiam aliquid dolor ipsam reprehenderit neque sequi ea voluptates consequuntur voluptatibus sit.</p>
            </div>
          </div>
        </div>
      </section>
    </main>
    <footer class="text-center">
      <h3 style="margin:0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia reprehenderit deleniti quae ex provident quibusdam harum illum. At, eaque, animi aperiam officia deleniti voluptates et? Corporis, iusto eligendi minus vero.</h3>
    </footer>
  </body>

  </html>

Upvotes: 0

How to remove a whitespace below a footer?

Answers (3)

Related Questions