Trying to find the bug on my css style sheet. I'm not sure why my html is not covering 100% of the page. See below screenshots:
The gap on the bigger screen is smaller but still annoying. See css below:
/*
===============
Fonts
===============
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@200;300;400;500;700&display=swap');
/*
===============
Variables
===============
*/
:root {
--clr-primary-1: rgb(41, 41, 41);
--clr-primary-3: hsl(185, 81%, 29%);
--clr-white: #fff;
--ff-primary: 'Roboto', sans-serif;
--transition: all 0.3s linear;
--spacing: 0.1rem;
--radius: 0.5rem;
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/*
===============
Global Styles
===============
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
font-family: var(--ff-primary);
background: var(--clr-white);
color: var(--clr-primary-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: var(--clr-primary-1);
}
img {
width: 60%;
display: block;
margin: auto;
}
/* global classes */
.section-center {
width: 100vw;
margin: 0 auto;
}
/*
===============
NavBar - header
===============
*/
nav {
position: fixed;
top: 0;
background: var(--clr-white);
width: 100%;
display: flex;
z-index: 2;
text-align: center;
padding: 10px 5px;
box-shadow: var(--dark-shadow);
}
.header-title {
font-weight: 500;
top: 0;
left: 0;
width: 100%;
}
===============
Main Banner
===============
*/
.main-banner {
display: flex;
min-height: 85vh;
background: url('../images//USoA-Homepage-Block-3.webp') center/cover
no-repeat;
align-items: center;
}
/*
===============
SHOP ALL SECTION
===============
*/
.collections {
font-size: 1.5rem;
margin-left: 1rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--spacing);
padding: 50px 0;
}
===============
ABOUT US
===============
*/
.about-us {
color: var(--clr-white);
background: var(--clr-primary-1);
display: flex;
display: block;
}
===============
PRODUCT
===============
*/
.products-holder {
padding: 1rem 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
justify-items: center;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Rainbow Sodas UK</title>
<!-- favicon -->
<link
rel="shortcut icon"
href="./images//favicon.ico"
type="image/x-icon"
/>
<!-- font-awesome -->
<link
rel="stylesheet"
href="./fontawesome-free-5.12.1-web/css/all.min.css"
/>
<!-- styles css -->
<link rel="stylesheet" href="./css/styles.css" />
<!-- Script -->
<script src="./js/app.js" defer></script>
</head>
<body>
<header id="home">
<nav>
<button type="button" class="nav-toggle" id="nav-toggle">
<i class="fas fa-bars"></i>
</button>
<h1 class="header-title">RAINBOW SODAS UK</h1>
<button type="button" class="nav-toggle" id="cart-drawer-toggle">
<i class="fas fa-shopping-cart"
><span class="cart-items-counter">0</span></i
>
</button>
</nav>
</header>
<main>
<div class="side-menu" id="side-menu">
<button type="button" id="drawer-close" class="drawer-menu-close">
<i class="far fa-window-close"></i>
</button>
<div class="drawer-title">SODAS UK</div>
<ul class="nav-links">
<li>
<a href="#products-filter" class="nav-link">shop all</a>
</li>
<li>
<a href="#products-filter" class="nav-link">products</a>
</li>
<li>
<a href="#about" class="nav-link">about us</a>
</li>
</ul>
</div>
<div class="cart-drawer" id="cart-drawer">
<div class="cart-inner">
<button
type="button"
id="cart-drawer-close"
class="cart-drawer-close"
>
<i class="far fa-window-close"></i>
</button>
<div class="cart-drawer-title">CART</div>
<section class="cart-items-list">
<article class="cart-item">
<div class="side-cart-product-item">
<h3>product 1</h3>
<button class="trash-icon">
<i class="far fa-trash-alt"></i>
</button>
</div>
<div class="side-cart-product-price">
<p>$40</p>
<div class="cart-qty">
<button class="qty-btn">-</button>
<span>0</span>
<button class="qty-btn">+</button>
</div>
</div>
</article>
</section>
</div>
<div cart="cart-footer">
<div class="total-display-side-cart">
<h3>total</h3>
<span>$120</span>
</div>
<div class="checkout-drawer">
<button>checkout</button>
</div>
</div>
</div>
<div class="main-banner">
<div class="banner-text">
<h1>
Welcome to <br /><strong
>the rainbow <br />uk <br />sodas company
</strong>
</h1>
</div>
</div>
<div class="collections">
<a href="#products-filter" class="shop-all"
>shop all <span><i class="fas fa-arrow-right"></i></span
></a>
</div>
<section class="section-center" id="about">
<div class="about-us">
<h1>WE THE PEOPLE BEHIND CRAFTED <br />SODAS IN <br />UK</h1>
<p>
In order for a more perfect beverage, establish variety, insure
palatable tranquility, provide for the extraordinary taste, promote
the general refreshment and secure the blessings of flavor to
ourselves and our posterity do ordain and establish this soda
company for the people of UK.
</p>
</div>
</section>
<section class="section-center" id="products-filter">
<div class="products">
<h1>SHOP THE <br />FLAVOURS</h1>
</div>
<button class="toggle-filter" id="toggle-category-filters">
filter
<span id="filter-btn-span"><i class="far fa-minus-square"></i></span>
</button>
<div class="categories-holder" id="categories-holder">
<button class="filter-btn" type="button" value="Berry">berry</button>
<button class="filter-btn" type="button" value="Berry">
citrusy
</button>
<button class="filter-btn" type="button" value="Berry">
classic
</button>
<button class="filter-btn" type="button" value="Berry">fancy</button>
<button class="filter-btn" type="button" value="Berry">floral</button>
<button class="filter-btn" type="button" value="Berry">jazzy</button>
<button class="filter-btn" type="button" value="Berry">juicy</button>
<button class="filter-btn" type="button" value="Berry">sour</button>
</div>
</section>
<section class="products-holder" id="products-holder">
<article class="single-product">
<div class="product-image-container">
<img src="images/Cherry_Pop_Still_4K_Front-CherryPop.png" alt="" />
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
</section>
<!-- footer -->
<footer class="section footer">
<!-- footer links -->
<ul class="footer-links">
<!-- single link -->
<li>
<a href="#" class="footer-link">home</a>
</li>
<!-- end of single link -->
<!-- single link -->
<li>
<a href="#about" class="footer-link">about</a>
</li>
<!-- end of single link -->
<!-- single link -->
<li>
<a href="#products-filter" class="footer-link">products</a>
</li>
<!-- end of single link -->
</ul>
<!-- end of footer links -->
<!-- footer icons -->
<ul class="footer-icons">
<!-- single icon -->
<li>
<a
href="https://www.twitter.com"
target="_blank"
class="footer-icon"
>
<i class="fab fa-facebook"></i>
</a>
</li>
<!-- end of single icon -->
<!-- single icon -->
<li>
<a
href="https://www.twitter.com"
target="_blank"
class="footer-icon"
>
<i class="fab fa-twitter"></i>
</a>
</li>
<!-- end of single icon -->
<!-- single icon -->
<li>
<a
href="https://www.twitter.com"
target="_blank"
class="footer-icon"
>
<i class="fab fa-instagram"></i>
</a>
</li>
<!-- end of single icon -->
</ul>
<!-- end of footer icons -->
<p class="copyright">
copyright © carlos suarez <span id="date"></span>. all rights
reserved
</p>
</footer>
</main>
</body>
</html>
I have checked the body class and the different classes that control the width but I can't find the problem. I have added the css classes where I think there could be a problem.
thanks!