Zmieniające się 2 obrazki na stronie głównej

pytanie zadane 12 grudnia 2016 w HTML i CSS przez ShadoWs Bywalec (2,800 p.)

Witam mam mały problem. Mam taką stronkę http://ckpl.pl/test/ i chciałbym zrobić żeby zmieniały się same zdjęcia (tam jak są góry) Próbowałem zrobić to za pomocą bootstrap jednak wszystko co dodaję pojawia się pod logiem przez co jest duże białe pole od góry?

html

<div id="my-progress-bar">
			 <div id="my-progress"></div>
		 </div>
        <div class="center">
       
<header class="header"><img class="header__logo" src="images/logo1.png"/>
  <p class="header__copy">Praktyczne kursy dla Ciebie</p>
    <div class="down">
	   <i class="fa fa-4x fa-angle-double-down"></i>
    </div>
</header>

css

.header {
  height: 80px;
  position: relative;
  z-index: 1;
  background-color: #fff;
}
.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
}
.header__logo {
  margin: 0 auto;
  display: block;
  position: relative;
  top: 5px;
  border-radius: 50%;
}
.header__copy {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 25px;
    margin-right: 150px;
    font-family: 'Philosopher', sans-serif;
}
.down {
	// background-color: rgba(0,0,0,0.3);
	position: fixed;
  bottom: 0;
  left: 50%;
  margin-left:-20px;
  width: 40px;
  height: 40px;
    margin-bottom: 20px;
	animation: bounce 2s infinite;
}

.fa {
	color: #ffffff;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}