Code Pen code displayed incorrectly when used in browser

Why is my Code Pen tribute project code not displaying correctly on a page when I open it from Notepad or Sublime into a browser (firefox or chrome) ? My text alignment is off when I open in within the browser.

<body>

  <div id="main" class="container">

  <div class="jumbotron">

  <div class="center">
      <h1 id="title" class="thick">A Tribute Page of Dave Chappelle's Rick James...</h1>

      <h4 class="oblique">A habitual line stepper....and an American treasure</h4>

 <div id="img-div">
   
      <figure class="figure">
      <img id="image" class="img-responsive" src="https://www.dropbox.com/s/knxcjr41lmrp6mf/fark_Na9mafiEUiJCH-M-cJpB_BDElHY.jpg?dl=1" alt="A generic square placeholder image.">
        <figcaption id="img-caption" class="figure-caption">BeeeeeeeeeeeeeeeeYeeeaaaahhhh!!!</figcaption>
      </figure>
    </div>
      </div>
    
      <div id="tribute-info" class="container">
      <div class="col-md-8 col-md-offset-2">
      <h3 class="thick">Interesting facts of Dave Chappelle's Rick James</h5>
      <ul>
        <li>According to Chappelle, the use of sparse sets for the "Rick James" sketch was inspired by the Family Ties (1982) episode Family Ties: My Name Is Alex (1987).</li>
        <li>Charlie Murphy was originally filmed telling the story while sitting down. But Neal Brennan realized that by having Murphy stand it would give the scenes more energy.</li>
        <li>Rick James liked to call Charlie Murphy "Darkness" because, "back then, we were the darkesst n**gas on the planet, according to Rick James,"- Charlie Murphy.</li> 
        <li>Charlie Murphy's son plays Eddie Murphy in the "Rick James" sketch.</li>
        <li>Dave Chappelle's Rick James skit was one of Dave's most popular skits.  It was also a skit that made Charlie Murphy more recognizable.</li>
        <li>The skit was so popular that it motivated some movie producers to persuade Dave if he'd be interested basing a movie of the Rick James character.</li>
        <li>When Eddie Murphy reviewed the skit, he sat in silence through the whole video-he didn't even laugh.  He was so impressed with the video though, that he requested to watch it again.</li>
        <li>Rick James was so tickeled by the episode that he thought about asking Dave to make another skit in regard of himself.</li>
        <li>Rick James passed away just 6 months after this episode aired.</li>
        <li>This episode was The Chappelle Show's first 'Charlie Murphy's True Hollywood Stories'. </li>
        <li>Chappelle’s Rick James became so famous for saying “b-ch” after every sentence, that there were even street signs that were vandalized with the saying on them.</li>
        <br>
        <h4>“You darkness!– you black!– late night, evil mothaf*****s! Black magic!– DARKNESS! … You raw … darkness… you… delirious… mothaf****s! … You were cold as ice!”.</h4>
        <h5><i>-Spoken by Chappelle as James while receiving a beating to his lower body from the Murphy brothers, in response to his ruining their couch.</i></h5>
      </ul>
<div style="background-color:#000000;width:648px;"><div style="padding:4px;width:640;height:360">
<iframe src="https://www.youtube.com/embed/Kaoug6sgjes" width="640" height="360" frameborder="0" allowfullscreen></iframe>
      </div>
  
        </div>
        <br>
        <h6>Source of Dave Chappelle's Rick James info were found here: <a id="tribute-link" href="https://www.imdb.com/title/tt0538711/?ref_=ttep_ep4" target="_blank">IMDB.com</a></h6>
    </div>
    </div>
    <div class="container">
    <hr>
      <h4 class="center">Created by chipotle298</h4>
    </div>
        </body>

You might want to validate your code. You have a couple div tags (#main and .jumbotron, the very first two) that are never closed. Not saying that’s causing the problem, but it sure won’t help.

As mentioned above, it looks like you are missing some closing div tags. You need to learn correct formatting and indentation as your code is very hard to read. Child elements should be indented by 2 spaces or a tab, from their parent element. It is good practice to open and close an element before you enter its content, so you dont forget.

All the things you mention are good practices, but know they are not fixed. The spacing and indent thing, for example, is merely a convention.

That said, the only reason i found the missing tags visually (rather than wasting time wth a validator) was because i used the “Tidy HTML” option in the html dropdown. Score one for best practices and indentation, huh?

Indentation may be a convention (and so is the amount of spaces you choose to use). But there is no way you can code a page of any significant complexity and size without getting into trouble real fast without proper indentation and formatting. Also, it’s rude to other people reading your code.

how did you take the code out of Codepen? You need to use the Export button at the bottom of the screen so it adds in all headers and links and gives you all the files.

Code pen takes care of certain header items for you (hence why they are missing from you code). AFter using export then validate, don’t validate before will have more errors without those headers.

I think that may be my problem (I copy and pasted the code into a bootstrap template). But now when I try to click Export and then Zip, the zip button doesn’t work. I click on it and it doesn’t download.

Thanks for the help everyone!