weird footer problem

by hcgriggs

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  	  <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#new">New</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#items">Items</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#meet-the-team">Team</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#exhibits">Exhibits</a>
                    </li>
                </ul>

               <!--  searchbar -->
             ...

CSS

hr {
	background-color: #000; /*firefox & opera*/
	border-color: #000; /*chrome & safari*/
	color: #000; /*IE 7+*/
}

/*navbar */
@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }
}

.container-fluid,.row {
	height: 100%;
}

#carousel-header {
	height: 100%;
	background-color: #fff;
	text-align: center;
	padding-top: 150px;
}

/*About Section*/
#about {
	height: 100%;
	background-color: #eee;
	text-align: center;
}


/*New Section
*/#new {
	height: 100%;
	background-color: #fff;
	text-align: center;
}

.newleft {
	background-color: black;
	height: 100%;
	padding-top: 70px;
}

.newright {
	background-color: gray;
	height: 100%;
	padding-top: 70px;
}

/*items section*/
#items {
	height: 100%;
	background-color: #eee;
	text-align: center;
}

.items-container {
/*	padding-top: 70px;*/
}

.item1 {
	background-color: #fff;
}

.item2 {
	background-color: #eee;
}

.item3 {
	background-color: #aaa;
}

.item4 {
	background-color: #bbb;
}



/*meet the team*/
#meet-the-team {
	height: 100%;
	background-color: #fff;
	text-align: center;
}

.team-container {
/*	padding-top: 70px;*/
}




#footer {
	height: 30%;
	background-color: #eee;
	text-align: center;
  padding-top: 70px;
}

#footer li,ul {
    list-style: none;
    text-align: left;
}

	/* Custom, iPhone Retina */

	/*==========  Mobile First Method  ==========*/
 
	/* Custom, iPhone Retina */
	@media only screen and (min-width : 320px){
 		.about-index {
			padding-top: 10px;
		}

		.items-container {
			padding-top: 10px;
		}

		.team-container {
			padding-top: 10px;
		}
	}
 
	/* Extra Small Devices, Phones */
	@media only screen and (min-width : 568px){
 		.about-index {
			padding-top: 10px;
		}

		.items-container...