[CSS] (Another) Container shrinks at certain screen widths

[Darkmisc]

TL;DR Summary

I want to make a sticky navbar with a banner above it. The sticky navbar spans 100% of the screen for all screen widths, but the banner will shrink at seemingly random points so that it doesn't always fill 100% of the width.

Hi everyone

I have a Bootstrap navbar and I'd like to add a banner above it. The Bootstrap navbar fills 100% of the screen width for all screen widths.

I've added a styled component to make a Parent div and a Banner div. These occupy 100% of the screen width most of the time, but at 887px and 464px they shrink (see below).

I've had a similar issue before with a container and was able to fix it by using media queries to set the width back to 100%. I tried this again, but it didn't work.

Lines 12-43 are the only lines that I've added to the Bootstrap code. I also tried using Bootstrap to make the Parent and Banner, but got the same result.

Here is the code for the page.

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`
display:grid;
background:blue;
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); /* Red with 50% opacity */

    @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(() => {
    // Set the CSS variable for primary color
    document.documentElement.style.setProperty('--primary-color', PrimaryColour);
    // Set the CSS variable for global font
    document.documentElement.style.setProperty('--global-font', GlobalFont);
  }, [PrimaryColour, GlobalFont]);


  const navbarStyle = {
    backgroundColor: PrimaryColour,
    height: "80px",
    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)',
    position: 'fixed',
    top: "80px",
    left: 0,
    width: '100%',
    zIndex: 1000,
    alignItems: "center",
  };


  return (
    <Parent>
    <Banner/>
    <nav className="navbar navbar-expand-lg" style={navbarStyle}>
      <Link className="navbar-brand" to="/">
        <img src={logo} alt="Logo" />
      </Link>
      <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <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="/">Home</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">
              Services
            </a>
            <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><Link className="dropdown-item" to="/services"
              style={{ fontFamily: 'Roboto, sans-serif' }}
              >Services</Link></li>
              <li><Link className="dropdown-item" to="/services/development"
              style={{ fontFamily: 'Roboto, sans-serif' }}>Development</Link></li>
              <li><hr className="dropdown-divider" /></li>
              <li><Link className="dropdown-item" to="/services/support"
              style={{ fontFamily: 'Roboto, sans-serif' }}
              >Support</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="Contact Us" />
          </li>
        </ul>
      </div>
    </nav>
    </Parent>
  );
};


export default StickyNavbar;

I think the media queries work (just not in the way that I'd like). I tested to see what would happen if I used the media query to set the width to 150%. This makes the pink part appear, which didn't happen before.

Does anyone know what's happening? I don't understand why I'm getting issues at (seemingly) random widths. Using media queries fixed a similar problem, and I don't understand why it's not working here also.


Thanks