Почему мой контейнер сжимается?

Question 1

У меня есть navbar на Bootstrap, и я разместил цветной div выше него. Оба установлены на ширину: 100%.

Однако, когда я тестирую страницу на разных ширинах экрана, navbar и div будут выходить за пределы 100% ширины, когда

ширина экрана < 887px и > 720px
ширина экрана < 464px

Я не могу понять, почему это происходит именно на этих ширинах.

У меня была аналогичная проблема с другим контейнером, и мне удалось ее исправить, использовав медиазапросы, чтобы установить ширину на 100% при определенных ширинах, но здесь это не работает.

То есть, код вроде приведенного ниже не работает.

@media screen and (min-width: 720px) and (max-width: 887px) {   
 display: grid;
    width:100%;}

;

Я также пробовал использовать несколько медиазапросов, чтобы установить ширину в пикселях. Код, похожий на приведенный ниже, не работает.

@media screen and (max-width: 887px) {
    display: grid;
    width:887px;}

@media screen and (max-width: 886px) {
    display: grid;
    width:886px;}

@media screen and (max-width: 885px) {
    display: grid;
    width:885px;}

@media screen and (max-width: 884px) {
    display: grid;
    width:884px;}

Кто-нибудь знает, почему мой navbar и div не всегда занимают 100% ширины экрана?

Вот код для этого.

import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import Example from './Modal';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPhone } from '@fortawesome/free-solid-svg-icons';
import { useGlobals } from '../../Globals';
import "./BNavbar.css";
import logo from "../../images/MJNNavbarlogo.png";
import styled from 'styled-components';

const Parent = styled.div`
width:100vw;

@media screen and (max-width: 887px) {
    display: grid;
    width:100%;}

    @media screen and (max-width: 464px) {
    display: grid;
    width:100%;}
`;

const Banner = styled.div`
display:grid;

  height: 80px;
  width: 100%;
  width:100vw;

  background: rgba(255, 0, 0, 0.5); /* Красный с 50% непрозрачностью */
@media screen and (max-width: 887px) {
    display: grid;
    width:100%;}

    @media screen and (max-width: 464px) {
    display: grid;
    width:100%;}

`;

const StickyNavbar = () => {
    const { PrimaryColour, GlobalFont } = useGlobals();

    useEffect(() => {
      // Установка CSS переменной для основного цвета
      document.documentElement.style.setProperty('--primary-color', PrimaryColour);
      // Установка CSS переменной для глобального шрифта
      document.documentElement.style.setProperty('--global-font', GlobalFont);
    }, [PrimaryColour, GlobalFont]);

    // Стиль navbar с фиксированным позиционированием
    const navbarStyle = {
      backgroundColor: PrimaryColour,
      height: "80px",
      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)',
      position: 'sticky', // Фиксированное позиционирование
      top: "0", // Прикрепить к верхней части (0)
      width: '100%',
      zIndex: 1000, // Высокий z-index, чтобы быть выше других элементов
      alignItems: "center",
    };

    return (
      <Parent>
        <Banner />
        <nav className="navbar navbar-expand-lg" style={navbarStyle}>
          <Link className="navbar-brand" to="https://stackoverflow.com/">
            <img src={logo} alt="Логотип" />
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Переключить навигацию"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse custom-navbar-collapse" id="navbarNav">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item active">
                <Link className="nav-link" to="https://stackoverflow.com/">Главная</Link>
              </li>
              <li className="nav-item dropdown">
                <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Услуги
                </a>
                <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li>
                    <Link className="dropdown-item" to="/services" style={{ fontFamily: 'Roboto, sans-serif' }}>
                      Услуги
                    </Link>
                  </li>
                  <li>
                    <Link className="dropdown-item" to="/services/development" style={{ fontFamily: 'Roboto, sans-serif' }}>
                      Разработка
                    </Link>
                  </li>
                  <li>
                    <hr className="dropdown-divider" />
                  </li>
                  <li>
                    <Link className="dropdown-item" to="/services/support" style={{ fontFamily: 'Roboto, sans-serif' }}>
                      Поддержка
                    </Link>
                  </li>
                </ul>
              </li>
              <li className="nav-item d-flex align-items-center custom-phone-number" style={{ marginLeft: "25px" }}>
                <FontAwesomeIcon icon={faPhone} className="me-2" />
                <a href="tel:0412123456" className="nav-link phone-number">
                  0412 123 456
                </a>
              </li>
              <li className="nav-item active" style={{ marginLeft: "25px" }}>
                <Example buttonText="Свяжитесь с нами" />
              </li>
            </ul>
          </div>
        </nav>
      </Parent>
    );
  };

  export default StickyNavbar;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

Question 2

Проверьте свойства баннера-героя (изображение) под вашим компонентом navbar.

Почему мой контейнер сжимается?

Ответ