Bootstrap question -- wonky footer

1

I have this simple bootstrap narrow jumbotron page. When it loads, it looks like this:

ScreenShot 2017-01-01 at 11.01.49.png2864Ă—404 31.8 KB

This is the code I wrote:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../static/favicon.ico">

    
    <title>About - languagecoach.io</title>
    

    <!-- Bootstrap core CSS -->
    <link href="../static/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../static/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../static/styles.css" rel="stylesheet">

  </head>
  
    

<body>
    <div class="container">
      <div class="header clearfix">
        <nav>
          <ul class="nav nav-pills pull-right">
            <li role="presentation"><a href="/">Home</a></li>
            <li role="presentation"><a href="/coachbot">CoachBot</a></li>
            <li role="presentation"><a href="/coaching">Coaching</a></li>
            <li role="presentation"><a href="/podcasts">Podcasts</a></li>
            <li role="presentation" class="active"><a href="/about">About</a></li>
          </ul>
        </nav>
        <a href="index.html"><img class="tinylogo" src="../static/logo.png" alt="language coach logo"></a>
      </div>

        About Alex
      
      </div>

      <footer class="footer">
        <p>&copy; 2017 Alex Strick van Linschoten // <a href="https://incrementalelephant.org/contact/">Contact</a></p>
      </footer>

    </div> <!-- /container -->


    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../static/ie10-viewport-bug-workaround.js"></script>
  </body>


  
</html>

Can anyone help me understand why the footer is beginning at the far left of the page? It should be aligned with the rest of the template and positioned in the middle…

2

You have closed the container early by adding after “About Alex” you need to remove that closing div.

2 Likes
3

Ah yes I see. Thank you!

2 Likes