Code renders perfectly on Codecademy but not from localhost in Firefox, what's different?

I recently completed Codecademy's 'Build a Professional Website' tutorial. My code looks good on Codeacademy and passes all their tests. When I save the code on my laptop and open it in Firefox, serving it from localhost, three of the five boxes under 'Neighborhood guides are misplaced.

Here's the HTML code:

<!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">

    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/main.css">

  </head>

  <body>
    <div class="nav">
      <div class="container">
        <ul class="pull-left">
          <li><a href="#">Name</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul class="pull-right">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>
     </div>
    </div>

<div class="jumbotron">
  <div class="container">
    <h1>Find a place to stay.</h1>
    <p>Rent from people in over 34,000 cities and 192 countries.</p>
    <a href="#">Learn More</a>
  </div>
</div> 
<div class="neighborhood-guides">
    <div class="container">
        <h2>Neighborhood Guides</h2>
        <p>Not sure where to stay? 
            We've created neighborhood guides for cities 
            around the world.
        </p>
        <div class="row">
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="https://i.sstatic.net/M6U3Oodp.png"
                </div>
                <div class="thumbnail">
                    <img src="https://i.sstatic.net/M6U3Oodp.png">
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="https://i.sstatic.net/M6U3Oodp.png" 
                </div>
                <div class="thumbnail">
                    <img src="https://i.sstatic.net/M6U3Oodp.png"
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="https://i.sstatic.net/M6U3Oodp.png"
                </div>
            </div>
        </div>
    </div>
</div>

<div class="learn-more">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h3>Travel</h3>
        <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
        <p><a href="#">See how to travel on Airbnb</a></p>
      </div>
      <div class="col-md-4">
        <h3>Host</h3>
        <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
        <p><a href="#">Learn more about hosting</a></p>
      </div>
      <div class="col-md-4">
        <h3>Trust and Safety</h3>
        <p>From Verified ID to our worldwide customer support team, we've got your back.</p>
        <p><a href="#">Learn about trust at Airbnb</a></p>
      </div>
    </div>
  </div>
</div>

Here's the CSS code (relies on twitter bootstrap):

.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
  display: inline;
}

.jumbotron {
  background-image:url('https://i.sstatic.net/M6U3Oodp.png');
  height: 500px;
}

.jumbotron .container {
  position: relative;
  top:100px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.jumbotron p {
  font-size: 20px;
  color: #fff;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}

.neighborhood-guides{
    background-color: #efefef;
    border-bottom: 1px solid #dbdbdb;
}

.neighborhood-guides h2{
    color: #393c3d;
    font-size:24px;
}

.neighborhood-guides p{
    font-size: 15px;
    margin-bottom: 13px;
}

Here's how to start localhost with Python

$ python -m SimpleHTTPServer

Please let me know how to resolve this formatting issue. Thank you for your time.

EDIT: I was able to replicate the issue using my github.io here. The code is located in this repository. The only difference is I changed /static/css/main.css to main.css in the HTML.

Solution

Your HTML code is broken. You have four image tags that are missing the end bracket.

For example:

<img src="https://i.sstatic.net/M6U3Oodp.png"

should be:

<img src="https://i.sstatic.net/M6U3Oodp.png">

When the browser parses the code, it will continue until it finds a matching bracket, which will be at the end of the following </div> tag. That in turn means that the next closing tag will close that div tag instead of the one outside it. Instead of having the div tags around the images after each other, they get nested inside each other. The div with class="learn-more" ends up nested four levels deep inside the div with class="neighborhood-guides".