Keeping nested anchor fixed while using width hover transition of div in CSS

Question

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?

Fiddle: https://jsfiddle.net/9hd3v84r/

* {
  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;
}

<div class="navrectangle">
  <nav>
    <a href=""><img src="media/Asset 1.png" alt=""></a>
    <div class="textnav">
      <div class="recpush">
        <li><a href="">NUMBER ONE</a></li>
      </div>
      <div class="recpush">
        <li><a href="">NUMBER TWO</a></li>
      </div>
      <div class="recpush">
        <li><a href="">NUMBER 3</a></li>
      </div>
      <div class="recpush">
        <li><a href="">NUMBER 4</a></li>
      </div>
    </div>

  </nav>
</div>

Thanks guys

Answer 1

Try this:

CSS:

li a{
  white-space: nowrap;
}

Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line.

DEMO HERE