Looking to create a row of images as a footer below the background image, but struggling with positioning it correctly. When I try to put the footer at the bottom, it ends up above some elements. Could the width of the images be causing the row to split into two?
.navbar-nav>li {
float: none;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0);
border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: rgba(150, 155, 155, );
}
.navbar {
margin-bottom: 0 !important;
}
.list {
font-family: 'Open Sans Condensed', sans-serif;
font-weight: bolder;
}
.synopsis {
color: white;
text-align: center;
}
.teampics .row {
margin-top: 17%;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="Calums2.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="person">
<img height="100%" src="http://i.imgur.com/pE2NrKh.jpg" style="position: absolute; top: 0; left: 0;" width="100%">
</div>
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<div class="navbar navbar-default">
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li><a href="Home.html"><h2>Home</h2></a></li>
<li><a href="team.html"><h2>Team</h2></a></li>
<li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li>
<li><a href="Blog.html"><h2>Blog</h2></a></li>
<li><a href="Expeditions.html"><h2>Expeditions</h2></a></li>
</ul>
</div>
</nav>
<style>
text-align: justify;
</style>
</div>
</div>
<div class="col-sm-4" style="position: absolute; bottom: 0px; left: 0px;">
<div class="synopsis">
<h3>Barrett's Privateers</h3>
<h5>We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
</div>
</div>
<div class="sponsorfooter" style="position: absolute; bottom: 0px; left: 0px;">
<div class="col-sm-1"><img src="https://static.wixstatic.com/media/83f988_1eab1592deae4a06927c22dd9435c1d6.jpg/v1/fill/w_196,h_90,al_c,q_75,usm_0.50_1.20_0.00/83f988_1eab1592deae4a06927c22dd9435c1d6.jpg"></div>
<!-- Add the other sponsor images here -->
</div>
</body>
</html>