html - 背景颜色没有拉伸整个屏幕宽度

问题描述

我正在为我的网站制作一个 about 部分，然后我遇到了一个问题，即该部分没有覆盖页面的整个宽度，并且我在其他帖子上发现的任何内容都没有为我工作。如果有帮助，我正在使用 bootstrap5。

* {
    margin:0px;
    padding:0px;
    
}

.navbar {
    background: #131313;
    padding: 1rem 8rem;
    z-index: 1000;
}

.navbar-nav {
    padding-right: 9%;
}

.navbar .navbar-brand {
    font-size: 1.4rem;
    font-weight: 700;
}



#navbarSupportedContent > ul > li:nth-child(n) > a {
    color: #fff;
    font-size: 1.1rem;
    padding: 0 0.8rem;
}

#navbarSupportedContent > ul > li:nth-child(n) > a:hover {
    color: grey;
}

#navbarSupportedContent > button {
    outline: none;
    background: rgb(197, 190, 190);;
    font-weight: 600;
    padding: 0.4rem 1.4rem;
    border-radius: 30px;
}

#navbarSupportedContent > button:hover {
    background: grey;
}

.mid {
    height: 80vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;
}

.mid video {
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hero {
    position: relative;
}

.hero h2 {
    font-weight: bold;
}

.mid .hero p {
    width: 55%;
    font-size: 1.1rem;
    letter-spacing: 0.2px;
    padding: 1.1rem;
}

.mid .hero a {
    background: rgb(197, 190, 190);;
    font-weight: 600;
    padding: 1rem 2rem;
    border-radius: 30px;
    text-decoration: none;

}

.mid .hero a:hover {
    background: grey;
}

.about {
    background:#000;

}

.about .text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: auto;
}

.about .text h2 {
    color: #F7F5F4;
    font-weight: 700;
    font-size: 2.7rem;
    letter-spacing: 2px;
}

.about .text p {
    color: #F7F5F4;
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Talk Tech Teen Tech</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">Talk Tech Teen Tech</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mx-auto">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Listen</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Product Specs</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Premium Techy</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Contact</a>
                  </li>
                  
                </ul>

                  <button class="btn btn-outline text-dark" type="submit">Sign Up</button>

              </div>
            </div>
          </nav>
        <div class="mid">
          <video autoplay muted loop>
            <source src="images/mic.mp4" type="video/mp4"><source>
          </video>
          <div class="hero text-center">
            <h2 class="text-light display-4">Talk Tech Teen Tech</h2>
            <p class="text-light mx-auto">This podcast talks about tech but through the eyes of grade school teens to get a different approach on the bleeding-edge of technology</p>
            <a class= text-dark href="#">Start Listening</a>
          </div>
        </div>
    </header>

    <section class="about container py-5 my-5 mx-auto">
      <div class="row align-items-center">
        <div class="img col-lg-6 col-md-6 col-12 pt-5 pb-5">
          <img class="img-fluid" src="images/mic.png">
        </div>
        <div class="text col-lg-6 col-md-6 col-12 pt-5 pb-5">
          <h2>About Us</h2>
          <p>Talk Tech Teen Tech is a podcast created by teens, made for the masses. In this podcast we talk about the bleeding edge of technology but through a teens perspective and what we think tech should be about and how companies handle technology. We talk about products from all sorts of companies (Apple, Samsung, OnePlus, Xiomi, Dell, Microsoft etc.). Our goal was to introduce another prespective of technology into the web and also to influence others that you don't need to be 30 to create a tech podcast, and with minimal gear you can create an amazing podcast!</p>
        </div>

      </div>
    </section>





<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>
</html>

这是结果

任何帮助将不胜感激！

标签： htmlcss

html - 背景颜色没有拉伸整个屏幕宽度

问题描述

解决方案

推荐阅读