I haven’t used getbootstrap.com/customize, but I think it allows you to create your own bootstrap theme (say you want btn-primary to be colored red instead of blue). But I don’t think you can readily use your custom version with codepen.
At the very top of the “Less variables” section is a subsection for setting colors for primary, default, warning, etc. which you can then reference anywhere (like in the field for @btn-primary-bg)
Have you seen this playlist?
I’m not really sure (I’m guessing that if the page width is less that the max width you defined, it just takes up whatever space there is regardless of margins). However I noticed that you didn’t use container / container-fluid and row classes. Why don’t you give them a try? Give this a read: