Cacher is the code snippet organizer for pro developers

<div id="logo">
     <img src="websiteLogo.png" />
</div>


<div class="contact">
    <div class="details">
         <p class="phone">03 0000 0000</p>
         <p class="mobile">0400 000 000</p>
         <a class="email" href="mailto:">email@email.com.au</a>
         <p class="address">123 Street Name, Australia 3000</p>
    </div>
    
    <div class="socialLinks">
        <a href="#" class="facebook"></a>
        <a href="#" class="instagram"></a>
        <a href="#" class="twitter"></a>
    </div>
</div>

#banner .container{
   padding:30px 0px;
   
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
           flex-direction: row;
           
   -webkit-align-items: center;
   -ms-flex-align: center;
           align-items: center;
           
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
           justify-content: space-between; 
}


#logo{
    width:80%;
    max-width:200px;
    max-height:80px;
}

#logo > img {
    width:100%;
    height:auto;
}

.contact {
    font-size:1em;
    color:inherit;
    text-align:right;
    font-family:inherit;
    
       display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
           flex-direction: row;
           
   -webkit-align-items: center;
   -ms-flex-align: center;
           align-items: center;
           
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
           justify-content: space-between; 
}

.contact p, .contact a{
    color:inherit;
    text-decoration:none; 
    line-height:1.2em;
}

/* ---------------------------------- */
/* ---------- SOCIAL LINKS ---------- */
/* ---------------------------------- */

.socialLinks {
  position: relative;
display:block;
margin-left:5px;
}

.socialLinks span {
  font-size: .9em;
  font-weight: 700;
  margin-right: 20px;
}

.socialLinks a {
    display:block;
  color:#fff;
  position: relative;
  text-decoration: none;
  vertical-align: top;
  margin: 2px;
}

.socialLinks a:hover {
    opacity:0.6;
}

.socialLinks a:after {
  font-family: FontAwesome;
  width: 23px;
  height: 20px;
  /*---- DISPLAY FLEX -----*/
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  /*---- END DISPLAY FLEX -----*/
  /*--- JUSTIFY CONTENT ---*/
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  /*--- END JUSTIFY CONTENT ---*/
  /*------ FLEX ALIGN -----*/
  align-items: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  /*------ END FLEX ALIGN -----*/
padding:1px 0px 0px;
}