BOOTSTRAP col problem

by he4rtbr0ken

HTML

<title>
  Index.html mountain biking</title>


<!-- CSS -->

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">




<!--JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="res/JS/bootstrap.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>



<body>
  <!-- top nav bar-->
  <div class="navbar navbar-inverse">
    <div class="container">

      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="index.html"><span class="glyphicon glyphicon-home"></span>Home</a></li>

          <li class="active"><a href="disciplines.html"><span class = "glyphicon glyphicon-info-sign"></span>Disciplines</a></li>

          <li><a href="science.html"><span class = "glyphicon glyphicon-warning-sign"></span> Science</li></a>

            <li><a href="gallery.html"><span class = "glyphicon glyphicon-picture"></span>Gallery</li></a>

              <li><a href="interactive.html"><span class="glyphicon glyphicon-screenshot"></span>Game</li></a>
        </ul>
      </div>
    </div>
 ...

CSS

/*load external fonts*/

@font-face {
  font-family: "BabasNeue";
  src: url(../fonts/BebasNeue.otf);
  url(../fonts/BebasNeue.otf);
}

* {
  /*selects all elements http://www.w3schools.com/cssref/css_selectors.asp*/
}

body {
  background-color: black;
}

p {
  font-family: calibri, arial, helvetica;
  color: gray;
}

a {
  text-decoration: none;
  color: gray;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: calibri, arial, helvetica;
}

.navbar {
  font-size: 16px;
  letter-spacing: 2px;
  font-family: BabasNeue, Calibri, Arial, helvetica;
  text-align: right;
}

.jumbotron {
  background-color: #262626;
  color: gray;
  padding: 10px;
}

h4 {
  font-family: BabasNeue, Calibri, Arial, helvetica;
}