I wrote this in Sublime and transferred to CodePen. In Chrome, content is centered in main and stays there.

The content div seems to lie on top of 2 column spaces. I notice that I get stuck a lot with the way things change when transferred from Sublime Text to CodePen. Is there something I am missing, some little trick that simplifies the transition?

What are external resources? CodePen allows you to link to CSS and JavaScript files anywhere on the web and run them in your Pen. You may also use other Pens as external resources. Why are external resources useful? Here are a couple of use cases:...

The gif shows how to add a JS library, but obviously you’ll want the CSS tab. It’s the same process.

I had a bit of text there in between the gif and the link. Easy to miss, but you need to add the Bootstrap CSS file under the CSS tab. The link describes the process clearly.

Bootstrap has both a JavaScript component, which you correctly added, but it also has a CSS component which has not yet been added, at least not correctly. I see you tried adding a <link> tag in the the header section under the HTML tag. Codepen ignores these.