Inline-Block Elements Not Filling Up The Entire Width Of Div Container Using Width Percentage

Hello,
I encountered this issue several weeks ago and decided to put the solution here. This pertains to inline-block elements not occupying the entire width of the container. Each element's width is set using percentage instead of pixels.

After doing some research, I found a solution here: Display Inline-Block with Widths as Percent with the solution to set the font-size of the container element to 0 and add style box-sizing to border-box. For the child elements, set the default font size.
CSS Code

.container {
            margin: 0 0 1em 0;
            border: 2px solid black;
            padding: 1em;
            font-size: 0; 
            box-sizing: border-box; 
        }

        nav {
            vertical-align: top;
            display: inline-block;
            width: 25%;
            word-wrap: break-word;
            background-color: lightgray;
            font-size: 16px; 
        }

        .column {
            vertical-align: top;
            display: inline-block;
            width: 75%;
            background-color: blueviolet;
            font-size: 16px; 
        }

        section {           
            background-color: orchid;
        }

HTML Code

<div class="container">
 <nav>
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Solutions</a></li>
   <li><a href="#">Products</a></li>
   <li><a href="#">FAQ</a></li>
   <li><a href="#">About Us</a></li>
   <li><a href="#">Contact Us</a></li>
  </ul>
 </nav>
 <div class="column">
  <section>
   <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
   </p>
  </section>
  <section>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
   </p>
  </section>
 </div>
</div>

Output

Fiddle inline-block issue