react-bootstrap fluid jumbotron not covering full width of webpage

Question

I've been working on a website to practice my react with create-react-app and react-bootstrap and styled-components. Initially, I had the jumbotron working totally fine when it was in my App.js file. When I wanted to move it to my Home.js file to only appear on the home page, I've found I am having a super hard time formatting it. Namely, I cannot get it span the width of the page even though it is a fluid jumbotron. Now I know that fluid will fill the element that it is within, but I can't for the life of me figure out where I need to be changing max-width or what I can do to get it to once again span the width of the webpage.

My Home.js file is below. Currently I have my Jumbotron directly in my Home function but I can't make it work either as a separate component that I import. Any thoughts?

import React from 'react'
import styled from 'styled-components'
import ReactDOM from 'react-dom';
import {SocialMediaIconsReact} from 'social-media-icons-react';
import { Container } from 'react-bootstrap';
import { Jumbotron as Jumbo } from 'react-bootstrap'
import coffeeImage from './assets/coffee.jpg';


const Styled = styled.div`

        .container {
            max-width: 100%;
        }

        .jumbo {
            background: url(${coffeeImage}) no-repeat fixed bottom;
            background-size: cover;
            color: #efefef;
            height: 800px; 
            width: 100%;
            right: 30%;
            position: relative;
            z-index: -2;
            margin: 20px;
        }

        .overlay {
            background-color: #000;
            opacity: 0.2;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: -1;
        }

        .title {
            font-family: Amatic SC;
            font-size: 120px;
            position: relative;
            right: 30%;
            top: 80px;
        }

        .slogan {
            font-family: Dosis;
            font-size: 50px;
            position: relative;
            top: 80px;
        }

    .homeHeader {
        font-family: Dosis;
        font-size: 4em;
        text-align: center;

    }

    .homeText {
        position: relative;
        padding-top: 50px;
    }

    .container {
        width: 350px;
        height: 50px;
        align-content: center;
    }

    a {
        padding: 10px;
    }


`;

export default function Home() {
    return (
       
        <Styled>
            <Jumbo fluid className="jumbo">
                <div className="overlay"></div>
                <h1 className="title">Sorta Sunny Coffee</h1>
                <p className="slogan">Drink in the sun!</p>
            </Jumbo>
            <Container>
                <SocialMediaIconsReact icon="twitter" url="/" iconSize="3"/>
                <SocialMediaIconsReact icon="snapchat" url="/"/>
                <SocialMediaIconsReact icon="facebook" url="/"/>
                <SocialMediaIconsReact icon="youtube" url="/"/>
                <SocialMediaIconsReact icon="instagram" url="/"/>

            </Container>
        </Styled>
    )
}

Answer 1

I have made some changes in your CSS, this might help...

Link of sandbox