title: Keeping nested anchor fixed while using width hover transition of div in CSS
body: <p>I am currently trying to achieve something when on hover, the background colour will change and animate as a "push" when the width changes from 0% to 100%. However, with my solution, setting the div to be 0% causes the anchor tag to not stay in a single line (breaks). How do I fix this?</p>
  
  <p><strong>Fiddle</strong>: <a href="https://jsfiddle.net/9hd3v84r/" rel="nofollow noreferrer">https://jsfiddle.net/9hd3v84r/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    padding: 0;
    margin: 0;
  }
  
  .navrectangle {
    width: 20Vw;
    height: 100vh;
    background-image: linear-gradient(to right, #002067, #013d98);
  }
  
  
  /* NAV */
  
  a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
  }
  
  img {
    padding-top: 8vh;
    width: 70%;
    margin: auto;
    display: block;
  }
  
  .textnav {
    padding-top: 6vh;
    display: block;
    list-style-type: none;
    font-size: 1.3vw;
  }
  
  .textnav a {
    margin-left: 3vw;
    width: 100%;
  }
  
  .textnav li {
    padding: 2vh 0vh;
    width: 100%;
  }
  
  .recpush {
    width: 0%;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
  }
  
  .recpush:hover {
    overflow: visible;
    background: #50d986;
    width: 110%;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
  }
  
  .textnav li:hover a {
    color: #002067;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="navrectangle"&gt;
    &lt;nav&gt;
      &lt;a href=""&gt;&lt;img src="media/Asset 1.png" alt=""&gt;&lt;/a&gt;
      &lt;div class="textnav"&gt;
        &lt;div class="recpush"&gt;
          &lt;li&gt;&lt;a href=""&gt;NUMBER ONE&lt;/a&gt;&lt;/li&gt;
        &lt;/div&gt;
        &lt;div class="recpush"&gt;
          &lt;li&gt;&lt;a href=""&gt;NUMBER TWO&lt;/a&gt;&lt;/li&gt;
        &lt;/div&gt;
        &lt;div class="recpush"&gt;
          &lt;li&gt;&lt;a href=""&gt;NUMBER 3&lt;/a&gt;&lt;/li&gt;
        &lt;/div&gt;
        &lt;div class="recpush"&gt;
          &lt;li&gt;&lt;a href=""&gt;NUMBER 4&lt;/a&gt;&lt;/li&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/nav&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks guys</p>