Having an issue with body style also transferring onto a page with only a banner class

Using Django
1

So basically any time i try to go to the product page the banner color overlaps with the body color and I want to set it up so the banner stretches across the top of the screen and says products in it and has the rest of the information in a body structure

Inkederror
Inkederror1879×973 93.2 KB

You can see the error where the green and the yellow meet

stylesheet.css


body>.container
{
   
}

body{
    background-image: linear-gradient(to right, olive, green);
    color: #fff;
    
    
    background-repeat: no-repeat;
    overflow: visible;

}


.banner
{
    background-image: linear-gradient(to right, olive, green);
    color: #fff;
    padding: 25%;
    margin: auto;
    background-repeat: no-repeat;
    
    
    
    
}

h1{
    color:purple;
    text-align: center;
    padding-bottom: 5%;
}

p{
    color:black;
    text-align: center;
    margin: 0;
}
.carousel{
    width: 1280;
    
    height: 720px;
    
    
    
    
}

.carousel-inner>.carousel-item>img{
    width: 1280px;
    
    height: 720px;
    
    
    
    
}

productpage.html

{% extends 'base.html' %}
{% load static %}

{%block content%}
<div class="banner">
    <h1> Products </h1>
        <br>
        <br>
        <h2> Pressure Washing </h2>
</div>
                


{% endblock %}

base.html

<!doctype html>
{% load static %}
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{% static '../static/admin/css/stylesheet.css'%}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

    <title>Solace Services</title>
  </head>
  
  <body>
    <section>
      <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">
          <img src="{% static '../static/admin/img/SolaceServices.png'%}" width=59 length=56>
          Solace Services</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href={% url 'homer' %}>Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href={% url 'trog:hello' %}>Products/Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href={% url 'trog:pPage' %}>Producto Pageo</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
                Dropdown link
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>
        </div>
      </nav>
    </section>
      <main class="container">
    <!-- Banner Stuff-->
    
  

    
    {% block content %}
    {% endblock  %}
    </main>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
    -->
  </body>


  
</html>

home.html

{% extends 'base.html' %}
{%load static%}
{% block content %}

<html>
    <head>
        <body>
          <div class="container">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                      <div class="carousel-item active">
                        <img src="{% static '../static/admin/img/image0.jpeg'%}" class="d-block w-100">
                      </div>
                      <div class="carousel-item">
                        <img src="{% static '../static/admin/img/image1.jpeg'%}" class="d-block w-100" alt="...">
                      </div>
                      <div class="carousel-item">
                        <img src="{% static '../static/admin/img/image2.jpeg'%}" class="d-block w-100" alt="...">
                      </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <span class="sr-only">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="sr-only">Next</span>
                    </button>
                  </div>
                <h1>
                    <a href = {% url 'trog:hello' %}>Products</a>
                </h1>

          </div>
        </body>
    </head>
</html>
{% endblock  %}