Discussion on: CodePen isn't displaying correct colors

I can reproduce your results on browser and codepen so it's not anything wrong with just your viewing.

Changing the padding on the body works, but none of the colors work at all.

Oh!

Okay so I can't tell you what the primary issue is, but if you add !important after your declarations that share the bootstrap names it'll work.

body {
    padding-top: 70px;
}

.flex {
    display: flex;
  flex-wrap: wrap;
}

.jumbotron {
    color: #2c3e50 !important;
    background-color: #ecf0f1 !important;
}

.navbar-inverse {
    background: #2c3e50 !important;
}

.navbar-inverse .navbar-brand {
    color: white !important;
}

.navbar-inverse .navbar-nav>li>a {
    color: white !important;
}

My guess it that in codepen the bootstrap coloring is being called after the css for the codepen, so it's overwriting your colors. Not entirely sure, but yeah.