First of all, it seems like you aren’t linking the necessary Bootstrap files in order for your related classes to work.
By clicking on the gear icon in any window, add the Bootstrap CSS file in the CSS tab, and both Jquery and Bootstrap in the JS tab. You can do this quickly by clicking on the Quick-add selection menu.
In Codepen, you should start your html code with what’s between the <body> tag, everything that’s normally in the head section is defined in the gear menu.
I can’t really help with the first issue as I’m having the same problem with my portfolio & tribute pages. For the second one, adding a closing tag for each of your “a name” elements should fix the problem.
I see you have <a name="..."> tags floating around in your code (right before the <div>s).
Also I saw in your CSS that you’re specifying widths and heights for elements that are marked as Bootstrap cols. For starters remove them so you have a better responsive layout.