Codepen Bootstrap wrong formatting

Question

I'd coded a small website for a FreeCodeCamp using Atom, and all was well. However, when I tried copying & pasting my code into CodePen, it came out wrongly formatted. See here.

Please find the HTML and CSS of the navbar below:

    <!-- NAVIGATION -->
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">10"88</a>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>

--

    /* -- NAVBAR -- */
.navbar {
  margin-bottom: 0;
}

.navbar-default {
  background-color: white;
  border-color: white;
  border-radius: 0;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
  color: black;
}

.navbar-default .navbar-brand:hover {
  color: white;
  background-color: #AE1429;
}

.navbar-default .navbar-nav .active > a {
  color: white;
  background-color: #AE1429;
}

.navbar-default .navbar-nav > li > a:hover {
  color: white;
  background-color: #AE1429;
}

I don't understand why my navbar (and images) looks as if it's being viewed on a small viewport. Any suggestions?

Answer 1

You're trying to use Bootstrap 3 classes with bootstrap 4 alpha. Take a look at documentation: there's no navbar-fixed-top or navbar-default.

Just replace the link in settings for https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css and everything will be fine.