title: Set my logo to the left and navigation menu to the right using flexbox
body: <p>I want to make a header with my name on the left and a navigator with "about" "portfolio" "contact" to the right using flexbox.</p>
  
  <p>I am using <code>justify-content: flex-end;</code> in my flexbox container but the items doesn't justify to the right, they stay to the left and I don't know why.</p>
  
  <p>I can use all kinds of <code>justify-content</code> but the header stays the same.</p>
  
  <p>I want to know how I make the name "Roger Anderson" stays to the left and "About, portfolio, contact" to the right.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* http://meyerweb.com/eric/tools/css/reset/
         v2.0 | 20110126
         License: none (public domain)
      */
  
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  
  
  /* HTML5 display-role reset for older browsers */
  
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  
  body {
    line-height: 1;
  }
  
  ol,
  ul {
    list-style: none;
  }
  
  blockquote,
  q {
    quotes: none;
  }
  
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: '';
    content: none;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  
  /* COMEÇADO O ESTILO */
  
  header {
    display: flex;
    justify-content: flex-end;
    background-color: black;
    height: 50px;
    align-items: center;
    width: 100%;
  }
  
  .logo-name,
  .nav li {
    font-family: 'Abel', sans-serif;
    color: white;
    font-weight: 400;
    text-transform: uppercase;
    align-self: center;
    padding-left: 5px;
  }
  
  .logo {
    height: 25px;
    width: 25px;
  }
  
  a {
    text-decoration: none;
  }
  
  a:visited {
    color: white;
  }
  
  a:link {
    color: white;
  }
  
  
  /*
      ========================================
        Navigation
      ========================================
      */
  
  .nav {
    margin-right: auto;
  }
  
  .nav li {
    display: inline-block;
    margin: 0 10px;
  }
  
  &lt; !DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;Roger Anderson&lt;/title&gt;&lt;link rel="stylesheet" href="style.css"&gt;&lt;link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"&gt;&lt;/head&gt;&lt;body&gt;&lt; !-- Header --&gt;&lt;header class="primary-header"&gt;&lt;h5 class="logo-name"&gt;Roger Anderson&lt;/h5&gt;&lt;nav class="nav"&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="about.html"&gt;about&lt;/a&gt;&lt;/li&gt;&lt; !-- --&gt;&lt;li&gt;&lt;a href="portfolio.html"&gt;portfolio&lt;/a&gt;&lt;/li&gt;&lt; !-- --&gt;&lt;li&gt;&lt;a href="contact.html"&gt;contact&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/nav&gt;&lt;/header&gt;&lt;/body&gt;&lt;/html&gt;My CSS:
  /* http://meyerweb.com/eric/tools/css/reset/
         v2.0 | 20110126
         License: none (public domain)
      */
  
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  
  
  /* HTML5 display-role reset for older browsers */
  
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  
  body {
    line-height: 1;
  }
  
  ol,
  ul {
    list-style: none;
  }
  
  blockquote,
  q {
    quotes: none;
  }
  
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: '';
    content: none;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  
  /* COMEÇADO O ESTILO */
  
  header {
    display: flex;
    justify-content: flex-end;
    background-color: black;
    height: 50px;
    align-items: center;
    width: 100%;
  }
  
  .logo-name,
  .nav li {
    font-family: 'Abel', sans-serif;
    color: white;
    font-weight: 400;
    text-transform: uppercase;
    align-self: center;
    padding-left: 5px;
  }
  
  .logo {
    height: 25px;
    width: 25px;
  }
  
  a {
    text-decoration: none;
  }
  
  a:visited {
    color: white;
  }
  
  a:link {
    color: white;
  }
  
  
  /*
      ========================================
        Navigation
      ========================================
      */
  
  .nav {
    margin-right: auto;
  }
  
  .nav li {
    display: inline-block;
    margin: 0 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="primary-header"&gt;
  
    &lt;h5 class="logo-name"&gt;Roger Anderson&lt;/h5&gt;
  
    &lt;nav class="nav"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="about.html"&gt;about&lt;/a&gt;&lt;/li&gt;
        &lt;!--
                --&gt;
        &lt;li&gt;&lt;a href="portfolio.html"&gt;portfolio&lt;/a&gt;&lt;/li&gt;
        &lt;!--
                --&gt;
        &lt;li&gt;&lt;a href="contact.html"&gt;contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>