title: Aligning image nav items into 2 lines in mobile size screen in Rails app
body: <p>I have nav bar in my Rails web app. I'm trying to make it responsible in mobile screen but I cannot achieve what I want. Below is image what it normally looks like in desktop screen.</p>
  
  <p><a href="https://i.stack.imgur.com/Lto7e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lto7e.png" alt="enter image description here"></a></p>
  
  <p>When I view this in iphone5 and iphone6 size, it looks like below. Logo image is on the left and nav items are on the right.
  <a href="https://i.stack.imgur.com/BgVfR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BgVfR.png" alt="enter image description here"></a></p>
  
  <p>I want to make everything centered and stretch nav items equally using full width like below:
  <a href="https://i.stack.imgur.com/YxcQ5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YxcQ5.png" alt="enter image description here"></a></p>
  
  <p>Below is the html code I have:</p>
  
  <pre><code>&lt;header class="page-header--transparent"&gt;
    &lt;div&gt;
          &lt;a href="/" class="page-header-logo"&gt;
              &lt;%= image_tag("logo-green.svg") %&gt;
          &lt;/a&gt;
      &lt;/div&gt;
          &lt;nav class="page-header-nav"&gt;
              &lt;%= link_to 'Login', new_user_session_path, :class =&gt; "page-header--transparent-nav-item" %&gt;
              &lt;%= link_to 'Get Started', new_user_registration_path, :class =&gt; "page-header--transparent-nav-item" %&gt;
              &lt;%= link_to 'Contact', '/contact', :class =&gt; "page-header--transparent-nav-item" %&gt;
          &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Below is CSS code:</p>
  
  <pre><code>.page-header--transparent {
      background-color: transparent;
      box-shadow: none;
      padding: 12px 20px;
  }
  
  .page-header-nav {
    float: right;
  }
  
  .page-header--transparent-nav-item {
      display: inline-block;
      border-bottom: 1px solid transparent;
      text-decoration: none;
      color: #757575;
      padding: 8px 17px;
      -webkit-font-smoothing: antialiased;
      transition: all ease-in-out 1s;
  }
  
  .page-header-logo {
    display: block;
    float: left;
    padding: 0 12px;
  }
  
  @media (max-width: 500px) {
      .page-header--transparent-nav-item {
          padding: 15px 10px;
      }
  
      .page-header--transparent {
          background-color: #ffffff;
          box-shadow: none;
          padding: 12px 20px;
      }
  }
  </code></pre>
  
  <p>It would be great if anyone can give me advice!!</p>