title: How do you centre two icons (images) side by side in footer?
body: <p>I'm close to completing the last section of my main page... the footer.</p>
  
  <p>I'm wondering how I can float two icons (images) next to each other? Referring to the two icon side by side. I understand the hover I just need to know how to position them accordingly. </p>
  
  <p>Thankyou!</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Aesthetic Media&lt;/title&gt;
  &lt;link href="styles.css" rel="stylesheet" type="text/css"/&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Raleway:400,700,500'  rel='stylesheet' type='text/css'&gt;
  &lt;script type="text/javascript" src="styles.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;header&gt;
  
      &lt;a class="logo" href="main.html"&gt;Aesthetic&lt;/a&gt;
  
      &lt;nav&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/nav&gt;
  
      &lt;div class="clears"&gt;&lt;/div&gt;
  
      &lt;div class="maintext"&gt;
  
          &lt;h1&gt;We're Aesthetic&lt;/h1&gt;
          &lt;h2&gt;A Visual Agency from Niagara&lt;/h2&gt;
  
      &lt;/div&gt;
  
  &lt;/header&gt;
  
  &lt;main&gt;
  
     &lt;h2 class="whatwedo"&gt;Expertise&lt;/h2&gt;
    &lt;div class="whatwedobox one"&gt;&lt;div class="branding"&gt;&lt;img src="images/branding.png" class="branding"&gt;&lt;h3&gt;Branding&lt;/h3&gt;&lt;/br&gt;&lt;p&gt;Are you looking for the competitive edge that will boost your business ahead of others? Look no further then Aesthetic... We're here to help.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
     &lt;div class="whatwedobox two"&gt;&lt;div class="motion"&gt;&lt;img src="images/motion.png" class="motion"&gt;&lt;h3&gt;Motion&lt;/h3&gt;&lt;/br&gt;&lt;p&gt;No matter the message you're trying to convey, we at Aesthetic will transform your idea, creating an incredible and memorable audio visual experience.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class="whatwedobox three"&gt;&lt;div class="design"&gt;&lt;img src="images/design.png" class="branding"&gt;&lt;h3&gt;Design&lt;/h3&gt;&lt;/br&gt;&lt;p&gt;Our talented team, here at Aesthetic is ready to help take your business to the sky! If you're looking for a professional, user friendly and beautifully designed website, just let us know!&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;/main&gt;
  
  &lt;div class="secondary"&gt;
  
      &lt;h2&gt;We bring out the beauty in anything and everything.&lt;/h2&gt;
      &lt;h3&gt;Aesthetic Media&lt;/h3&gt;
  
  &lt;/div&gt;
  
  &lt;footer&gt;
  
      &lt;a class="logotwo" href="main.html"&gt;Aes&lt;/a&gt;
  
          &lt;nav&gt;
              &lt;li&gt;&lt;a href="#" class="facebook" title="Facebook Page"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="Mail" title="Contact Us!"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/nav&gt;
  
  &lt;/footer&gt;
  
  &lt;script     src="https://ajax.googleapis.com/ajax/libsLorem/jquery/1.11.2/jquery.min.js"&gt;  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  }
  
  body {
  background: white;
  }
  
  header {
  width: 100%;
  height: 550px;
  background: white;
  background: url('images/main.jpg') center center;
  background-size: cover;
  padding: 30px 30px 30px 30px;
  position: relative;
  }
  
  .logo {
  top: 33px;
  left: 30px;
  width: 200px;
  height: 80px;
  display: block;
  float: left;
  z-index: 30;
  font-size: 1.8em;
  font-weight: 800;
  text-decoration: none;
  color: #FFFFFF;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 5px;
  position: absolute;
  }
  
  .logo a {
  font-size: 1.8em;
  font-weight: 800;
  text-decoration: none;
  color: #FFFFFF;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 5px;
  }
  
  nav {
  top: 22px;
  right: 30px;
  float: right;
  z-index: 30;
  letter-spacing: .2em;
  position: absolute;
  }
  
  nav li {
  float: left;
  list-style: none;
  padding: 10px 15px 10px 15px;
  }
  
  nav li:last-child {
   border-right: none;
  }
  
  nav li a {
  padding: 5px 10px 5px 10px;
  color: white;
  display: block;
  font-weight: 400;
  text-decoration: none;
  color: #FFFFFF;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  }
  
  nav li a:hover {
  background-color: rgba(0, 0, 0, 0.5);
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -webkit-font-smoothing: antialiased;
  }
  
  .clears {
  clear: both;
  }
  
  .maintext {
  margin: auto;
  width: 600px;
  text-align: center;
  margin-top: 185px;
  color: white;
  z-index: 30;
  position: relative;
  }
  
  .maintext h1 {
  font-weight: 600;
  font-size: 1.8em;
  line-height: 1.2em;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #FFFFFF;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  padding-bottom: 15px;
  }
  
  .maintext h2 {
  font-weight: 400;
  font-size: 1.7em;
  line-height: 1.2em;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  color: #FFFFFF;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  padding-bottom: 15px;
  }
  
  main {
  max-width: 1180px;
  margin: auto;
  margin-top: 50px;
  overflow: hidden;
  }
  
  
  h2.whatwedo {
  text-align: center;
  font-weight: 400;
  font-size: 1.7em;
  line-height: 1.2em;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  color: #000000;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  -webkit-font-smoothing: antialiased;
  }
  
  .motion img {
  max-width: 45%;
  min-width: 45%;
  height: 150px;
  margin-left: 89px;
  }
  
  .branding img {
  maxwidth: 50%;
  height: 150px;
  margin-left: 100px;
  }
  
  .design img {
  width: 42%;
  height: 138px;
  margin-left: 85px;
  margin-top: 13px;
  }
  
  .whatwedobox {
  width: 30%;
  height: 350px;
  border: none;
  float: left;
  margin-right: 5%;
  padding: 15px;
  margin-top: 20px;
  margin-bottom: 15px;
  }
  
  .whatwedobox:last-child {
  margin-right: 0%;
  }
  
  main h3 {
  text-align: center;
  padding-top: 20px;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  -webkit-font-smoothing: antialiased; 
  }
  
  main p {
  text-align: center;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  -webkit-font-smoothing: antialiased; 
  }
  
  .secondary {
  width: 100%;
  height: 200px;
  margin-top: 20px;
  background: white;
  background: url('images/sky.jpg') center center;
  background-size: cover;
  padding: 30px 30px 30px 30px;
  position: relative;
  }
  
  .secondary h2 {
  margin: 0 200px;
  margin-top: 3px;
  margin-bottom: 17px;
  height: 90px;
  width: 500px;
  font-weight: 600;
  font-size: 1.8em;
  line-height: 1.2em;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #FFFFFF;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  padding-bottom: 15px;
  }
  
  .secondary h3 {
  margin: 0 auto;
  height: 50px;
  width: 320px;
  font-weight: 400;
  font-size: 1.7em;
  line-height: 1.2em;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px; 
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  color: #FFFFFF;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  }
  
  footer {
  width: 100%;
  height: 150px;
  margin-top: 75px;
  background: rgba(0, 0, 0, 0.8);
  position: relative;
  
  }
  
  .logotwo {
  top: 60px;
  left: 150px;
  width: 100px;
  height: 40px;
  display: block;
  float: left;
  z-index: 30;
  font-size: 2em;
  font-weight: 800;
  text-decoration: none;
  color: #FFFFFF;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 9px;
  position: absolute;
  }
  
  .logotwo a {
  font-size: 1.8em;
  font-weight: 800;
  text-decoration: none;
  color: #FFFFFF;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 5px;
  margin: 10px 10px 10px 10px;
  -webkit-font-smoothing: antialiased;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px; 
  }
  
  .facebook {
  top: 22px;
  right: 70px;
  width: 64px;
  height: 64px;
  float: right;
  z-index: 30;
  display: block;
  background: url('images/fb.png') center top no-repeat;
  letter-spacing: .2em;
  position: absolute;
  }
  
  .facebook:hover {
  background-image: url('#');
  }
  
  .mail {
  top: 22px;
  right: 30px;
  width: 64px;
  height: 64px;
  float: left;
  z-index: 30;
  display: inline-block;
  background: url('images/email.png') center top no-repeat;
  letter-spacing: .2em;
  position: absolute;
  }
  
  .mail:hover {
  background-image: url('#');
  }
  </code></pre>