title: my html code works in codepen but not in chrome browser
body: <p>I put this specific code into codepen, and it displays correctly and looks great, but when i export the file and open it up through local chrome browser it does not work properly. The static headline keeps displaying below the carousel instead of in the carousal, here is the code im using. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main-text {
    position: absolute;
    top: 50px;
    width: 96.66666666666666%;
    color: #FFF;
  }
  .btn-min-block {
    min-width: 170px;
    line-height: 26px;
  }
  .btn-clear {
    color: #FFF;
    background-color: transparent;
    border-color: #FFF;
    margin-right: 15px;
  }
  .btn-clear:hover {
    color: #000;
    background-color: #FFF;
  }
  .carousel-caption {
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
    &lt;title&gt;Depot Sqaure&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/class" href="style.css"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
            &lt;ol class="carousel-indicators"&gt;
              &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
            &lt;/ol&gt;
            &lt;div class="carousel-inner"&gt;
              &lt;div class="item active"&gt;
                &lt;img src="images/mainimg01.png" alt="First slide"&gt;
                &lt;div class="carousel-caption"&gt;
                  &lt;h3&gt;
                                  Your elegant and affordable destination&lt;/h3&gt;
                  &lt;p&gt;
                    for family, business, and community events.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                &lt;img src="http://placehold.it/1200x500/9b59b6/8e44ad" alt="Second slide"&gt;
                &lt;div class="carousel-caption"&gt;
                  &lt;h3&gt;
                                  Second slide&lt;/h3&gt;
                  &lt;p&gt;
                    Nulla vitae elit libero, a pharetra augue mollis interdum.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                &lt;img src="http://placehold.it/1200x500/34495e/2c3e50" alt="Third slide"&gt;
                &lt;div class="carousel-caption"&gt;
                  &lt;h3&gt;
                                  Third slide&lt;/h3&gt;
                  &lt;p&gt;
                    Nulla vitae elit libero, a pharetra augue mollis interdum.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"&gt;
              &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
            &lt;/a&gt;&lt;a class="right carousel-control" href="#carousel-example-generic" data-slide="next"&gt;&lt;span class="glyphicon glyphicon-chevron-right"&gt;
                          &lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="main-text hidden-xs"&gt;
            &lt;div class="col-md-12 text-center"&gt;
              &lt;h1&gt;
                          Static Headline And Content&lt;/h1&gt;
              &lt;h3&gt;
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      &lt;/h3&gt;
              &lt;div class=""&gt;
                &lt;a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/"&gt;MORE ABOUT US&lt;/a&gt;&lt;a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/"&gt;CHECK AVAILABILITY&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="push"&gt;
    &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>