Body styling stops at one screen for no apparent reason

The styling I have on the body element stops exactly where my computer "first screen" stops. There doesn't seem to be a code related reason for it:

// Styled JSX react.js library:
 body {
        font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
        background-color: wheat;
        border: 2px dashed green;
      }

I don't believe the HTML has anything that would cause the body CSS to stop:

<label htmlFor="lowQuantityThreshold">
          Enter a stock amount at which this rule will activate an override percentage for any product not marked as an
          exclusion (or leave blank to disable this rule)
        </label>
        <input type="number" />

        <label htmlFor="minQuantityPercentage">

        </label>
      </section>

      <section>
        <h4>Individual Product Rules</h4>
        <p>Set a specific trade in price point and product ID here. Individual product rules override all global
           rules.</p>

Does anyone know what's going on to cause this?

Update

As requested in the comments here is the full CSS:

<style jsx global>{`

      html, body { height : 100% !important; }

      body {  
        font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
        background-color: wheat;
        border: 2px dashed green;
      }

      p, h1, h2, h3, h4, h5, h6 {
        font-family: Roboto, Helvetica, sans-serif;
        color: rgba(30, 30, 30, .9);
      }

      button {
        color : whitesmoke;
        padding-top: 4px;
        padding-bottom: 4px;
      }

      section {
        margin: 2vh 2vw;
        padding: 2vh 2vw;
        background-color: white;

        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
        border-radius: 2px;
      }

      section > * {
        padding: 1vh .5vw;
      }

      h3 {
        font-size: calc(26px + (38 - 14) * ((100vw - 300px) / (1600 - 300)));
      }

      h4 {
        font-size: calc(18px + (28 - 14) * ((100vw - 300px) / (1600 - 300)));
      }

      h5 {
        font-size: calc(20px + (32 - 14) * ((100vw - 300px) / (1600 - 300)));
      }

      table * { text-align: center; }

      button {
        border: none;
        border-radius: 2vw;
        cursor: pointer;
        background-color: #5c6ac4;
      }

      input[type=text], input[type=number] {
        padding: 1vh 1vw;
        min-width: 200px;
        max-width: 400px;
      }

      .inputRow {
        display : grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(50px, 200px));
        justify-items: center;
        align-items: center;
        border: 2px dashed red;
      }

      .formEmulationGrid {
        display : grid;
        grid-gap : 1rem;
        grid-template-columns : repeat(auto-fill, minmax(200px, 1fr))
      }

    `}</style>