Making a footer float properly with CSS

I want the two headers (navigation and download links) to float side by side. Additionally, the navigation items (home, solutions, about, contact) and the linked images to float directly below their headers (navigation and download links). I am fairly new at this so any assistance is greatly appreciated!

body, html{
font-family: helvetica;
height:100%;
margin:0%;
}

header {
padding: 20px 0;
background: white;
}

.container {
padding: 0 30px 00px 30px;
max-width: 1600px; /* look on big monitor for width */
margin-right: 20px;
}

.logo-box {
float: left;
}

.logo-box a {
outline: none;
display: inline-block;
}

.logo-box img {display: inline;}
nav {
overflow: hidden;
}

ul {
list-style: none;
margin: 0;
padding-top: 30px;
padding-bottom: 0px;
float: right;
}

nav li {
display: inline-block;
margin-left: 25px;
height: 20px;
line-height: 20px;
transition: .5s linear;
}

nav a {
text-decoration: none;
display: block;
position: relative;
color: black;
font-size: 12px;
font-weight: lighter;
text-transform: uppercase;
}

nav a:after {
content: "";
width:0;
height: 7.5px;
position: absolute;
left: 0;
bottom: 0px;
background: black;
transition: width .3s linear;
}

nav a:hover:after {
width: 100%;
}

@media screen and (max-width: 660px) {
header {text-align: center;}
.logo-box {
float: none;
display: inline-block;
margin: 0 0 0 0;
}
ul {float: none;}
nav li:first-of-type {margin-right: 0;}
}

@media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
display: block;
margin: 0;
height: 40px;
line-height: 40px;
}
nav li:hover {text-decoration: underline;}
nav a:after {content: none;}
}

.heroImage {
background-image: url("./images/doc_tablet2.jpeg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-top: 1px solid gray;
position: relative;
width: 100%;
height: 70%;
display: table;
}

.heroText {
margin-top: 160px;
margin-left: auto;
margin-right: auto;
background-color: rgba(255, 255, 255, 0.8);
width: 70%;
text-align: center;
padding: 20px;
border-radius: 5px;
border-width: medium;
left: 0;
font-family: helvetica;
font-weight: lighter;
font-size: 20px;
color: #333;
letter-spacing: 1px;
display:block;
}

#heroTextButtons {
display: inline-block;
padding: 20px;
text-align: center;
font-size: 1px;
font: helvetica;
font-weight: lighter;
text-align: center;
color: #2D71C5;
}


/* End main image section */

/* Why choose us section start */
.whyChooseUs {
margin-left: 25px;
padding: 10px 40px;
height: auto;
width: auto;
color: #333;
letter-spacing: 1px;
line-height: 30px;
position: relative;
text-align: center;
outline: none;
font-size: 18px;
display: block;
font-weight: lighter;
}
/* Why choose us section end */

/* Solution table start */
.solutionTable {
table-layout: fixed;
margin-bottom: 60px;
padding: auto;
height: auto;
width: 100%;
color: #333;
letter-spacing: 1px;
line-height: 25px;
position: relative;
text-align: center;
font-size: 18px;
overflow:auto;
display: block;
border-collapse: separate;
border-spacing: 2px;
}

.solutionTable th, td {
table-layout: fixed;
text-align: center;
color: #333;
letter-spacing: 1px;
font-size: 16px;
font-weight: lighter;
vertical-align: top;
width: auto;
padding: 5px 40px 0px 0px;
overflow: auto;
}

/* End of Why Choose Us */

/* Featured Clients Section #FAFAFA*/
.featuredClients {
text-align: center;
background-color: white;
border-radius: 0px;
width: 100%;
position: relative;
display: inline-block;
vertical-align: top;
border-top: solid;
border-bottom: solid;
border-color: #e9e9e9;
border-width: thin;
font-weight: lighter;
}

#featuredClientsText {
font: helvetica;
font-size: 35px;
color: #333;
font-weight:lighter, bold;
letter-spacing: 1px;
text-align: center;
padding: 30px;
margin-top: 20px;
}

.decorated {
 overflow: hidden;
 text-align: center;
 font-weight:100;
 }
.decorated > span{
position: relative;
display: inline-block;
}
.decorated > span:before, .decorated > span:after{
content: '';
position: absolute;
top: 50%;
border-bottom: 2px solid;
width: 150px; /* half of limiter */
margin: 0 20px;
}
.decorated > span:before{
right: 100%;
}
.decorated > span:after{
left: 100%;
}
.images{
text-align: center;
vertical-align: top;
display: inline-block;
padding: 20px;
}

/* End Featured Clients Section */
.findOut {
text-align: center;
color: #333;
font: helvetica;
font-size: 35px;
font-weight: lighter;
letter-spacing: 1px;
letter-spacing: 1px;
background-color: white;
padding: 60px 60px 70px 50px;
width: auto;
border-bottom-style: solid;
border-color: #333;
border-width: medium;
position: relative;
line-height: 50px;
background-color: #FAFAFA;
border-bottom-style: solid;
border-color: #333;
}

.learnMoreText{
font-size: 20px;
font: helvetica;
font-weight: lighter;
text-align: center;
color: #0070c9;

}
.learnMoreText:hover {
text-decoration: underline;
text-align: center;
}
/* Find Out How Section */

/*  Footer start */
#footerContainer {
float:right;
width:100%;
position:relative;
right:50%;
background-color: #dddddd; /* column 1 background color */
}

.nav {
font-size: 18px;
text-align: left;
font-family: helvetica;
margin-left: 40px;
letter-spacing: 1.5px;
color: #333;
}

#col1 {
float:left;
width:48%;
position:relative;
left:52%;
text-align: left;
text-decoration: none;
}

#col1 ul, li, a {
justify-content:space-around;
list-style-type:none;
font-size: 12px;
line-height: 25px;
text-decoration: none;
color: black;
letter-spacing: 1px;
}

#col1 a:hover {
color: black;
text-decoration: underline;
}

#col2 {
float:left;
width:50%;
position:relative;
left:52%;
background-color: #dddddd; /* column 2 background color */
text-decoration: none;
}

#col2 ul {
list-style: none;
list-style-type:none;
font-size: 20px;
padding: 15px;
text-align: left;
color: black;
text-decoration: none;
left: 52%;
}

#col2 li {
font-size: 20px;
text-align: left;
margin-right: 100px;
display: inline-block;
text-decoration: none;
}

.alertmdLLC {
text-align: center;
font: helvetica;
font-size: 12px;
letter-spacing: 1px;
font-weight: lighter;
vertical-align: top;
margin-bottom: 0px;
margin-top: 50px;
margin-left: 0px;
margin-right: 0px;
background-color: #dddddd;
color: gray;
}
/*  Footer end */


Here is the HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AlertMD</title>
  <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>


 <!-- Start Navigation -->
 <header>
 <div class="container">
 <div class="logo-box">
   <a href="home.html">
     <img src="./images/logo.png" height="55px" width="250px">
   </a>
  </div>
  <nav>
  <ul>
   <li><a href="home.html">HOME</a></li>
   <li><a href="solutions.html">SOLUTIONS</a></li>
   <li><a href="about.html">ABOUT</a></li>
   <li><a href="contact.html">CONTACT</a></li>
 </ul>
 </nav>
 </div>
  </header>
  <!-- End Navigation -->


  <!-- Start Hero Image -->
  <div class="heroImage">
     <div class="heroText">
        <h2></h2>
        <p></p>
        <p id="heroTextButtons"><a href="contact.html" 
 class="learnMoreText" >
        Request a Demo ></a></p>
        <p id="heroTextButtons"><a href="solutions.html" 
 class="learnMoreText" >
        Learn More ></a></p>
     </div>
  </div>
  <!-- End Hero Image -->


  <!-- Start Why Choose Us -->
  <div class="whyChooseUs">
     <h2>Why Choose Us?</h2>
     <p></p>
  </div>
  <div class="solutionTable">
     <table>
        <tr>
           <th><img src="" alt="" height="100" width="75"> </th>
           <th><img src="" alt="" height="100" width="65"> </th>
           <th><img src="" alt="" height="100" width="100"> </th>
        </tr>
        <tr>
           <th><h3></h3></th>
           <th><h3></h3></th>
           <th><h3></h3></th>
        </tr>
        <tr>
           <td></td>
           <td></td>
           <td></td>
        </tr>
        <tr>
           <td>
              <a href="solutions.html">
              <img src="./images/LearnMoreBtn.png" alt="Learn More 
  Button" style="width:100px; height:auto;"></a>
            </td>
           <td>
              <a href="solutions.html">
              <img src="./images/LearnMoreBtn.png" alt="Learn More 
  Button" style="width:100px; height:auto;"></a>
           </td>
           <td>
              <a href="solutions.html">
              <img src="./images/LearnMoreBtn.png" alt="Learn More 
   Button" style="width:100px; height:auto;"></a>
           </td>
        </tr>
     </table>
  </div>
  <!-- End Why Choose Us -->


  <!-- Start Featured Clients -->
  <div class="featuredClients">
    <div id="meetTheTeam">
      <h2 class="decorated"><span>Featured Clients</span></h2>
    </div>
     <div class="images">
        <a href="" target="_blank">
        <img src="" alt="" style="width:300px; height:auto;"></a>
     </div>
     <div class="images">
        <a href="" target="_blank">
        <img src="" alt="" style="width:250px; height:auto;"></a>
     </div>
     <div class="images">
        <a href="" target="_blank">
        <img src="" alt="" style="width:250px; height:auto;"></a>
     </div>
     <div class="images">
        <a href="" target="_blank">
        <img src="" alt="" style="width:325px; height:auto;"></a>
     </div>
     <div class="images">
        <a href="" target="_blank">
        <img src="g" alt="" style="width:200px; height:auto;"></a>
     </div>
     <div class="images">
        <a href="" target="_blank">
        <img src="" alt="" style="width:200px; height:auto;"></a>
     </div>
     <div class="images">
        <a href="" target="_blank">
        <img src="" alt="" style="width:200px; height:auto;"></a>
     </div>
     <div class="images">
        <a href="" target="_blank">
        <img src="" alt="" style="width:250px; height:auto;"></a>
     </div>
  </div>
  <!-- Start Featured Clients -->


  <!-- Start Find Out -->
  <div class="findOut">
     <p>Find Out How  Can Improve Your Care Coordination</p>
     <div>
        <p><a href="contact.html" class="learnMoreText" >
        Request a Demo ></a></p>
     </div>
  </div>
  <!-- End Find Out -->


  <div id="footer">
 <div id="footerContainer">
    <div id="col1">
       <!-- Column one start -->
       <p class="nav">Navigation</p>
       <ul>
          <li><a href='home.html'>Home</a></li>
          <li><a href='about.html'>About</a></li>
          <li><a href='solutions.html'>Solutions</a></li>
          <li><a href='contact.html'>Contact</a></li>
       </ul>
       <!-- Column one end -->
    </div>
    <div id="col2">
       <!-- Column two start -->
       <p class="nav">Download Links</p>
       <ul>
          <li>
             <a href="" target="_blank">
             <img src="./images/appStore.png" alt="Apple App Store
  Download Icon" style="width:150px; height: 45px;"></a>
          </li>
          <li>
             <a href="" target="_blank">
             <img src="./images/playStore.png" alt="Google Play
  Store Download Icon" style="width:150px; height: 45px;"></a>
          </li>
       </ul>
       <!-- Column two end -->
    </div>
  </div>
  </div>
  <div class="alertmdLLC">
 <p>Copyright © 2017. All rights reserved.</p>
  </div>
  <!-- End Footer -->


   </body>
  </html>