article grid not extending all the way to the edge

Why is the article grid not extending all the way to the edge of the screen but rather cutting short and and hence leaving an ugly void of space between the the edge of the screen and the article grid?

I am assuming i set up the grid incorrectly to start with. My other web-pages pages don't share this problem however.

body {
    background-image: url(../media/Grocerytheme2.jpg);
    background-position: center;
    /* Center the image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: cover;
    display: grid;
    grid-template-areas:
        "header header header"
        "nav article article"
        "nav footer footer";
    grid-template-rows: 80px 1fr 100px;
    grid-template-columns: 20% 1fr 15%;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    height: 100vh;
    margin: 0;
}

header {
    padding: 1.2em;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60);
    /* For IE8 and earlier */
    /*background: #99ffbb;*/
}

header p,
article p,
footer p,
nav p {
    font-weight: bold;
    color: #000000;
}


footer,
nav {
    padding: 1.2em;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60);
}

article {
    padding: 1.2em;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid black;
    position: relative;
}

#pageHeader {
    grid-area: header;
}

#pageFooter {
    grid-area: footer;
}

#mainArticle {
    grid-area: article;
}

#mainNav {
    grid-area: nav;
}

@media all and (max-width: 575px) {
    body {
        grid-template-areas:
            "header"
            "article"
            "nav"
            "footer";
        grid-template-rows: 80px 1fr 70px 1fr 70px;
        grid-template-columns: 1fr;
    }
}

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

.navbar {
    margin: 0;
    padding: 0px;
    overflow: hidden;
}

nav li {
    list-style-type: none;
    margin: 2em 0;
}

nav li a {
    color: black;
    text-align: left;
    padding: 2px 4px;
    font-size: 1em;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
    padding: 5px;
}

nav li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

.subnav-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 1);
    z-index: 1;
}

.subnav-content a {
    font-size: 0.8em;
    color: black;
    padding: 12px 12px;
    text-decoration: none;
    display: block;
}

.subnavbtn a.active {
    color: white;
}


.subnav-content a:hover {
    background-color: #555;
}

.subnav:hover .subnav-content {
    display: block;
}

.subnav:hover .subnavbtn {
    -color: #555;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title> CS425 </title>
</head>

<body>
    <header id="pageHeader">
        <h1> <b> Grocos </b> </h1>
    </header>
    <nav id="mainNav">
        <div class="navbar">
            <li><a href="HomePage.html"> Home </a></li>
            <li><a href="Sign_up_pg.html"> login </a></li>
            <div class="subnav">
                <div class="subnavbtn">Shop <i class="pulldown"></i></div>
                <div class="subnav-content">
                    <li><a href="poultry.html"> Poultry</a></li>
                    <li><a href="fruits.html"> Fruits </a></li>
                    <li><a href="vegetables.html"> Vegetables </a></li>
                    <li><a href="consumables.html"> Snacks </a></li>
                </div>
            </div>
        </div>
    </nav>
    <article>
        <section class="container content-section">
            <h2 class="section-header">Poultry</h2>
            <div class="shop-items">
                <div class="shop-item">
                    <span class="shop-item-title">Dozen Eggs</span>
                    <img class="shop-item-image" src="media/Eggs.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">$2.00</span>
                        <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">Whole chicken</span>
                    <img class="shop-item-image" src="media/WholeChicken.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">$10.00</span>
                        <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">Lamb chop</span>
                    <img class="shop-item-image" src="media/Lamb.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">$1.50</span>
                        <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">mutton (leg cut)</span>
                    <img class="shop-item-image" src="media/Goat.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">$5.00</span>
                        <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                    </div>
                </div>
                div class="shop-item">
                <span class="shop-item-title">Milk </span>
                <img class="shop-item-image" src="media/Milk.jpg">
                <div class="shop-item-details">
                    <span class="shop-item-price">$2.00</span>
                    <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                </div>
            </div>

        </section>

        <section class="container content-section">
            <h2 class="section-header">CART</h2>
            <div class="cart-row">
                <span class="cart-item cart-header cart-column">ITEM</span>
                <span class="cart-price cart-header cart-column">PRICE</span>
                <span class="cart-quantity cart-header cart-column">QUANTITY</span>
            </div>
            <div class="cart-items">
            </div>
            <div class="cart-total">
                <strong class="cart-total-title">Total</strong>
                <span class="cart-total-price">$0</span>
            </div>
            <button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
        </section>
    </article>
    <footer id="pageFooter">
        <p><em> Contact info: </em> <strong>+1999999999</strong> </p>
        <p> email us at: <a href="mailto:something.edu"> something.edu </a></p>
    </footer>
</body>

</html>

Solution

add grid-area:article to your article css definition

article {
    padding: 1.2em;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid black;
    position: relative;
    grid-area: article;
}