For the past few days, I've been engrossed in working on a website to sharpen my React skills using create-react-app, react-bootstrap, and styled-components. Initially, everything was smooth sailing with the jumbotron when it resided in my App.js file. However, the real challenge began when I decided to relocate it to my Home.js file so that it only appears on the home page. No matter what I try, I can't seem to get it to span the width of the page, despite being a fluid jumbotron.
My struggles are evident in the code snippet below from my Home.js file where I'm attempting various methods to style the Jumbotron element. Even configuring it as a separate component that I import doesn't yield the desired result. Any ideas or suggestions?
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';
// Styled component styles for Jumbotron
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>
)
}