title: Footer doesn't extend to the edge of the screen - not a duplicate
body: <p>I've seen a few of these on Stack Overflow, but the questions that have been asked don't lead to an answer which solves my issue. Please take the time to look over my code before marking it down or flagging it as a duplicate.</p>
  
  <p>I'm working through a book called "Beginning django CMS". I'm finding that a few parts are out of date, and that might be the issue here. It's tough for me to say because I'm new to web design.</p>
  
  <p>The footer isn't in a <code>&lt;div&gt;</code>, and I've gone over the padding to see if that helps. Those are the kinds of issues that come up as answers to questions that have previously been posted on Stack Overflow. </p>
  
  <p>I'm being left with a footer which begins about an inch in from the left of the screen and seems to be in line with the blog title. Does anyone know what might be causing this?</p>
  
  <p>I've checked this in Chrome and Edge so far, both come up with the indent.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>{% load cms_tags staticfiles sekizai_tags menu_tags %}
  &lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv"X-UA-Compatible" Content = "IE=Edge"&gt;
      &lt;meta name = "viewport" content="width=device-width", initial-scale=1&gt;
  
      &lt;link rel="icon" href="favicon.ico"&gt;
  
      &lt;title&gt;{% block title %}MyBlog Title{% endblock title %}&lt;/title&gt;
  
      &lt;link href="https://cdnjs.cloudfare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel = "stylesheet"&gt;
  
      &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  
      &lt;!-- MyBlog custom styles --&gt;
      &lt;link href="{% static "myblog.css" %}" rel="stylesheet"&gt;
  
      &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script src=https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
      {% render_block "css" %}
  &lt;/head&gt;
  &lt;body&gt;
      {% cms_toolbar %}
      &lt;nav class="navbar navbar-default navbar-static-top"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;a href=""&gt;&lt;img src="{% static "" %}"/&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div id="navbar" class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      {% show_menu 0 1 0 100 "menu.html" %}
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="blog-header"&gt;
              &lt;h1 class="blog-title"&gt;Patch's Soapbox&lt;/h1&gt;
              &lt;p class="lead blog-description"&gt;The political system is broken; it could do with a Patch&lt;/p&gt;
          &lt;/div&gt;
          {% block content %}{% endblock content %}
      &lt;/div&gt;
  
      &lt;footer class="footer"&gt;
       &lt;div class="container"&gt;
        &lt;p class="text-muted"&gt;{% block footer %}My Blog&amp;copy;2015{%endblock footer%}&lt;/p&gt;
       &lt;/div&gt;
      &lt;/footer&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;!-- IE10 viewport hack for Surface/desktop Windows 8 bu --&gt;
      &lt;script src="{% static "ie10-viewport-bug-workaround.js" %}"&gt;&lt;/script&gt;
  
      {% render_block "js" %}
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>And the CSS:</p>
  
  <pre><code>html {
      position : relative;
      min-height: 100%;
  }
  
  body {
      /* Margin bottom by footer height */
      margin-bottom: 60px;
      font-family : Georgia, "Times New Roman", Times, serif;
      color #555;
  }
  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
      margin-top: 0;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serfi;
      font-weight: normal;
      color: #333;
  }
  .footer {
      position: absolute;
      margin-left : 0px
      bottom: 0;
      width: 100%;
      height: 60px;
      background-color: #f5f5f5;
  }
  .blog-header {
      padding-top: 20px;
      padding-bottom: 20px;
  }
  
  .blog-title {
      margin-top: 30px;
      margin-bottom: 0;
      font-size: 28px;
      font-weight: normal;
  }
  .blog-description{
      font-size: 20px;
      color: #999;
  }
  .sidebar-module{
      padding: 15px;
      margin: 0 -15px 15px;
  }
  .sidebar-module-inset {
      padding: 15px;
      background-color: #f5f5f5;
      border-radius: 4px;
  }
  .sidebar-module-inset p:last-child,
  .sidebar-module-inset ul:last-child,
  .sidebar-module-inset ol:last-child{
      margin-bottom: 0;
  }
  .pager {
      margin-bottom: 60px;
      text-align: left
  }
  .pager &gt; li &gt; a {
      width: 140px;
      padding: 10px 20px;
      text-align: center;
      border-radius: 30px;
  }
  .blog-post{
      margin-bottom: 60px;
  }
  .blog-post-title{
      margin-bottom: 5px;
      font-size: 40px;
  }
  .blog-post-meta {
      margin-bottom: 20px;
      color : #999;
  }
  body &gt; container {
      padding: 0px 0px 0;
  }
  .container .text-muted {
      margin: 20px 0;
  }
  .footer &gt; .container {
      padding-right: 15px;
      padding-left: 0;
  }
  .row {
      margin-right: 0px!important;
  }
  </code></pre>