title: Align nav Items Right Inside Header
body: <p>I don't want to use Float properties.</p>
  
  <p>I want to use these properties(link): <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow noreferrer">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a></p>
  
  <p>Also I have commented the background image css3? which also I want to apply</p>
  
  <p>My Code:</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>*{
      margin:0;
      padding: 0;
      box-sizing: border-box;
  }
  
  
  html,
  body {
      background-color: #fff;
      color: #555;
      font-family: "Lato", "Arial", "sans-serif";
      font-weight: 300;
      font-size: 20px;
      text-rendering: optimizeLegibility;
      }
  
  
  .wrapper{
   display: flex;
      display: -webkit-flex;
      display: -ms-flexbox;
      margin: 0 auto;
      flex-direction:column;
      width: 100%;
      max-width: 80%;
      border: solid 1px #000;
  }
  
  .header{
      /*background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("logo.png");
      background-size: cover;
      background-position: center;
      height: 100vh;
      background-attachment:fixed; */
      background-color: rgba(0, 0, 0, 0.8);
      color: rgba(0, 0, 0, 0.7);
      }
  
  .logo{
      height: 100px;
      width:auto;
      border-radius: 50%;
      margin: 10px;
      align-items: center;
  }
  
  
  .main-nav {
      display: flex;
      list-style: none;
      }
  
  
  .main-nav a{
      text-decoration: none;
      color:rgba(255, 255, 255, 0.8);
  }
  
  
  
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;FlexBox: HTML5 and CSS3 Fundamentals&lt;/title&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="styles.css" media="screen" /&gt;
  
    &lt;link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="wrapper"&gt;
      &lt;header&gt;
        &lt;div class="header"&gt;
          &lt;img src="logo1.png" alt="Logo" class="logo"&gt;
  
          &lt;nav&gt;
            &lt;ul class="main-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;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      &lt;/header&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>