Fix the Bootstrap Carousel

http://stackoverflow.com/questions/38089557/

by Gleb Kemarsky

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="MSA-masthead MSA-masthead-grad">
  <div class="container">
    <nav class="MSA-nav">
      <a class="MSA-nav-item active" href="home.html"><img src="http://lorempixel.com/g/240/20/" width="250"></a>
      <span class="pull-right">
        <a class="MSA-nav-item " href="#" >FAQ</a>
        <a class="MSA-nav-item " href="#" >Login</a>
      </span>
    </nav>
  </div>
</div>

<div class="container">
  <div class="row">
    <div id="carousel-msa" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-msa" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-msa" data-slide-to="1"></li>
        <li data-target="#carousel-msa" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <div class='inner-item'>
            <img src="http://lorempixel.com/1200/560/sports/1/Dummy-Text/" alt="carousel caption 1">
            <div class="carousel-caption">
              carousel caption 1
            </div>
          </div>
        </div>
        <div class="item">
          <div class='inner-item'>
            <img src="http://lorempixel.com/1200/560/sports/2/Dummy-Text/" alt="carousel caption 2">
            <div class="carousel-caption">
              carousel caption 2
            </div>
          </div>
        </div>
        <div class="item">
          <div class='inner-item'>
            <img src="http://lorempixel.com/1200/560/sports/3/Dummy-Text/" alt="carousel caption 3">
            <div class="carousel-caption">
              carousel caption 3
           ...

CSS

@import url(https://fonts.googleapis.com/css?family=Archivo+Narrow:400,700);

/*
* Globals
*/
body {
  font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
  background-color: #222;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: 0;
  font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #000;
}


/*
* Override Bootstrap's default container.
*/
@media (min-width: 1200px) {
  .container {
    width: 1200px;
  }
}

.content1 {
  background-color: #fff;
  min-height: 600px;
}


/*
* Masthead for nav
*/

.MSA-masthead {
  border-bottom: 1px solid rgba(200, 200, 200, 0.1);
  box-shadow: 0 28px 24px -20px #000 inset;
  left: 0;
/*   position: absolute; */
  top: 0;
  width: 100%;
  z-index: 200;
  height: 40px;
}

.MSA-masthead-grad {
  background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%) repeat scroll 0 0;
}

.MSA-masthead-solid {
  background-color: #000;
}


/* Nav links */

.MSA-nav-item {
  position: relative;
  display: inline-block;
  padding: 8px 10px;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}

.MSA-nav-item:hover,
.MSA-nav-item:focus {
  color: #cdddeb;
  text-decoration: none;
}


/* Active state gets a caret at the bottom */

.MSA-nav .active {
  color: #FEC30E;
}

.MSA-nav .active:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  vertical-align: middle;
  content: " ";
  border-right: 5px solid transparent;
  border-bottom: 5px solid;
  border-left: 5px solid transparent;
}


/*
* SA name and description
*/

.MSA-header {
  padding-top: 20px;
  padding-bottom: 20px;
}

.MSA-title {
  margin-top: 30px;
  margin-bottom: 0;
  font-size: 60px;
  font-weight: normal;
}

.MSA-description {
  font-size: 20px;
  color: #999;
}

.MSA-topSpacer {
  padding-top: 30px;
}


/*
* Main column and sidebar layout
  line-height: 1.5;
*/

.MSA-main {
  font-size: 18px;
  padding-left: 2%;
...