尝试在我的 css 样式表中查找错误。我不确定为什么我的 html 没有覆盖 100% 的页面。请参阅下面的屏幕截图:
较大屏幕上的间隙较小，但仍然很烦人。请参阅下面的 CSS:
/*
===============
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>
我已经检查了主体类和控制宽度的不同类，但我找不到问题。我已经在我认为可能有问题的地方添加了 css 类。
谢谢!
最佳答案
添加这个CSS
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
关于Html 未覆盖移动显示上页面的 100% 宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65160675/