Row in HTML wont fill full screen

let products = {
  data: [{
      productName: "Regular White T-Shirt",
      category: "Topwear",
      price: "30",
      image: "images/products/white-tshirt.jpg",
    },
    {
      productName: "Beige Short Skirt",
      category: "Bottomwear",
      price: "49",
      image: "images/products/short-skirt.jpg",
    },
    {
      productName: "Sporty SmartWatch",
      category: "Watch",
      price: "99",
      image: "images/products/sporty-smartwatch.jpg",
    },
    {
      productName: "Basic Knitted Top",
      category: "Topwear",
      price: "29",
      image: "images/products/knitted-top.jpg",
    },
    {
      productName: "Black Leather Jacket",
      category: "Jacket",
      price: "129",
      image: "images/products/black-leather-jacket.jpg",
    },
    {
      productName: "Stylish Pink Trousers",
      category: "Bottomwear",
      price: "89",
      image: "images/products/pink-trousers.jpg",
    },
    {
      productName: "Brown Men's Jacket",
      category: "Jacket",
      price: "189",
      image: "images/products/brown-jacket.jpg",
    },
    {
      productName: "Comfy Gray Pants",
      category: "Bottomwear",
      price: "49",
      image: "images/products/comfy-gray-pants.jpg",
    },
  ],
};

for (let i of products.data) {
  //Create Card
  let card = document.createElement("div");
  //Card should have category and should stay hidden initially
  card.classList.add("card", i.category, "hide");
  //image div
  let imgContainer = document.createElement("div");
  imgContainer.classList.add("image-container");
  //img tag
  let image = document.createElement("img");
  image.setAttribute("src", i.image);
  imgContainer.appendChild(image);
  card.appendChild(imgContainer);
  //container
  let container = document.createElement("div");
  container.classList.add("container");
  //product name
  let name = document.createElement("h5");
  name.classList.add("product-name");
  name.innerText = i.productName.toUpperCase();
  container.appendChild(name);
  //price
  let price = document.createElement("h6");
  price.innerText = "$" + i.price;
  container.appendChild(price);
  card.appendChild(container);
  document.getElementById("products").appendChild(card);
}
//parameter passed from button (Parameter same as category)
function filterProduct(value) {
  //Button class code
  let buttons = document.querySelectorAll(".button-value");
  buttons.forEach((button) => {
    //check if value equals innerText
    if (value.toUpperCase() == button.innerText.toUpperCase()) {
      button.classList.add("active");
    } else {
      button.classList.remove("active");
    }
  });
  //select all cards
  let elements = document.querySelectorAll(".card");
  //loop through all cards
  elements.forEach((element) => {
    //display all cards on 'all' button click
    if (value == "all") {
      element.classList.remove("hide");
    } else {
      //Check if element contains category class
      if (element.classList.contains(value)) {
        //display element based on category
        element.classList.remove("hide");
      } else {
        //hide other elements
        element.classList.add("hide");
      }
    }
  });
}
//Search button click
document.getElementById("search").addEventListener("click", () => {
  //initializations
  let searchInput = document.getElementById("search-input").value;
  let elements = document.querySelectorAll(".product-name");
  let cards = document.querySelectorAll(".card");
  //loop through all elements
  elements.forEach((element, index) => {
    //check if text includes the search value
    if (element.innerText.includes(searchInput.toUpperCase())) {
      //display matching card
      cards[index].classList.remove("hide");
    } else {
      //hide others
      cards[index].classList.add("hide");
    }
  });
});
//Initially display all products
window.onload = () => {
  filterProduct("all");
};

nav#navbar {
  background-color: rgba(0, 0, 0, 0) !important;
}

nav#navbar ul.navbar-nav {
  display: flex;
  margin: 0 auto;
}

.centered {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: LIGHTBLUE;
  font-size: 75px;
}

.centered2 {
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 25px;
}

#search-container {
  margin: 1em 0;
}

#search-container input {
  background-color: transparent;
  width: 40%;
  border-bottom: 2px solid #110f29;
  padding: 1em 0.3em;
}

#search-container input:focus {
  border-bottom-color: #6759ff;
}

#search-container button {
  padding: 1em 2em;
  margin-left: 1em;
  background-color: #6759ff;
  color: #ffffff;
  border-radius: 5px;
  margin-top: 0.5em;
}

.button-value {
  border: 2px solid #6759ff;
  padding: 1em 2.2em;
  border-radius: 3em;
  background-color: transparent;
  color: #6759ff;
  cursor: pointer;
}

#products {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 1.5em;
  padding: 2em 0;
}

.card {
  background-color: #ffffff;
  max-width: 18em;
  margin-top: 1em;
  padding: 1em;
  border-radius: 5px;
  box-shadow: 1em 2em 2.5em rgba(1, 2, 68, 0.08);
}

.image-container {
  text-align: center;
}

img[src^="images/products/"] {
  max-width: 100%;
  object-fit: contain;
  height: 15em;
}

.container {
  padding-top: 1em;
  color: #110f29;
}

.container h5 {
  font-weight: 500;
}

.hide {
  display: none;
}

@media screen and (max-width: 720px) {
  .card {
    max-width: 10em;
    margin-top: 1em;
  }
  #products {
    grid-template-columns: auto auto;
    grid-column-gap: 1em;
  }
}

.col-md-12#footer {
  background-color: rgb(37, 37, 37) !important;
  height: 5em;
  display: flex;
  align-items: flex-end;
  padding-left: 0;
  bottom: 0 !important;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Bootstrap test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/products.css">
  <link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet'>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Quicksand&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  <script src="JavaScript/products.js" defer></script>
</head>


<body>
  <!--Navigation bar-->
  <nav class="navbar navbar-expand-md bg-dark navbar-dark navbar-fixed-top transparent sticky-top" id="navbar">
    <a class="navbar-brand" href="index.html">
      <img src="images/DallE_Extendo-removebg.png" width="80" height="60" alt="">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="aboutus.html">About us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="products.html">Products</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contactus.html">Contact us</a>
        </li>
      </ul>
    </div>
  </nav>
  <!--NavBar Ends-->


  <!--Content Begins-->
  <div class="container-fluid" style="background-color: rgba(0, 0, 0, 0.8); padding-bottom: 100px; padding-left: 0; padding-right: 0;">
    <img src="images/TEST.jpg" id="TitleImg" style="width: 100%; max-height: 533px; padding-left: 0; padding-right: 0;">
    <div class="centered">Products</div>
    <div class="centered2">All products are avaliable to purchase in the shop</div>
    <br><br><br><br><br><br>
    <div class="container-fluid">
      <div class="row">
        <div class="wrapper">
          <div id="search-container">
            <input type="search" id="search-input" placeholder="Search product name here.." />
            <button id="search">Search</button>
          </div>
          <div id="buttons">
            <button class="button-value" onclick="filterProduct('all')">All</button>
            <button class="button-value" onclick="filterProduct('Topwear')">Topwear</button>
            <button class="button-value" onclick="filterProduct('Bottomwear')">Bottomwear</button>
            <button class="button-value" onclick="filterProduct('Jacket')">Jacket</button>
            <button class="button-value" onclick="filterProduct('Watch')">Watch</button>
          </div>
          <div id="products"></div>
        </div>

        <div class="col-md-12" id="footer">
          <div class="col-md-1" style="font-size: 10px;">
            <p>TEST</p>
          </div>
          <div class="col-md-4" id="addy" style="padding-left: 1%; text-align: center;">
            <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; "></p>
          </div>
          <div class="col-md-4" id="sm" style="padding-left: 10%; padding-bottom: 1%; display: flex;">
            </a>&nbsp;&nbsp;&nbsp;
          </div>
          <div class="col-md-3" style="text-align: center; padding-left: 0;">
          </div>
        </div>
      </div>
    </div>
</body>

</html>