title: How i right align images?
body: <p>Im currently trying to recreate a photography website for practice and ive gotten as far as creating the nave bar and the icons. Im having difficulties with my images though. Im wanting to align them to the right of the nav bar and im struggling to figure it out. Please provide me with some feedback. Ill post my source code and the photography website im trying to replicate.
  Here is the link to the website: <a href="https://www.samalive.co/" rel="nofollow noreferrer">https://www.samalive.co/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #faf9f9;
    padding: 70px;
  }
  
  header {
    list-style-type: none;
    line-height: 40px;
    margin-left: 20px;
    margin-top: 200px;
    font-family: 'Fjalla One', sans-serif;
  }
  
  .footer {
    margin-left: 20px;
  }
  
  .title {
    padding-right: 20px;
    font-family: 'Shadows Into Light', cursive;
    font-size: 30px;
    letter-spacing: 5px;
  }
  
  hr {
    border-top: none;
    border-left: none;
    width: 500px;
  }
  
  
  img {
    width: 30%;
    float: left;
    display: block;
    padding: 17px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Fjalla+One|Shadows+Into+Light" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="header"&gt;
      &lt;header&gt;
        &lt;nav&gt;
          &lt;h1 class="title"&gt;Am Alive&lt;/h1&gt;
          &lt;li&gt;Home&lt;/li&gt;
          &lt;li&gt;City&lt;/li&gt;
          &lt;li&gt;Portrait&lt;/li&gt;
          &lt;li&gt;Lifestyle&lt;/li&gt;
          &lt;li&gt;About&lt;/li&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
      &lt;hr align="left"&gt;
      &lt;div class="footer"&gt;
        &lt;a class="footer-link" href="https://twitter.com/"&gt;&lt;i class="fab fa-instagram"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a class="footer-link" href="https://twitter.com/because_imalex"&gt;&lt;i class="fab fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;p&gt;© 2018 Visual Madness.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
  
  
  
  
    &lt;img src="images/waterfall1.jpg" alt=""&gt;
    &lt;img src="images/waterfall2.jpg" alt=""&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>