Position 2 divs in the same line
<p>I'm trying to layout my first site and I'm stuck on positioning two divs in the same line. I have posted an image below showing the layout I am trying to achieve.</p>

<p><img src="https://i.imgur.com/TJCba26.jpg" alt="img"></p>

<p>This is the code that i have for the 2 divs at the moment.</p>

<pre><code>    &lt;div class="full-width"&gt;
     &lt;div class="logo"&gt;
      &lt;img src="img/logo.png"/&gt;
     &lt;/div&gt;
     &lt;div class="social"&gt;
      &lt;ul class="social-icons"&gt;
       &lt;li&gt;&lt;img src="img/facebookSS.png"/&gt;&lt;/li&gt;
       &lt;li&gt;&lt;img src="img/twitter.png"/&gt;&lt;/li&gt;
       &lt;li&gt;&lt;img src="img/instagramSS.png"/&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="address"&gt;
    &lt;p&gt;Address to go here&lt;/p&gt;
   &lt;/div&gt;
   &lt;/div&gt;
</code></pre>

<p>I have been playing around with the CSS for a little while but just can't seem to get it right.</p>

<p>What I am looking to do is have all the above on one row, with the nav on the row underneath. Hope that makes sense. I am not using any framework like bootstrap so just using my own classes etc.</p>

<pre><code> * {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

  body {
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  position: relative;
}

.logo {
  width: 300px;
  height: auto;
  position: relative;
  display: inline-block;
}

.logo img {
  width: 100%;
  height: auto;
}

.social {
  display: inline-block;
  float: right;
  margin-right: 20%;
}

.social li {
  display: inline-block;
}

.social li img {
  width: 50px;
  height: auto;
}

.full-width {
  width: 100%;
  margin: 0 auto;
  position: relative;
  text-align: center;
} 
</code></pre>