It seems like a simple issue, but I just can't get the background to cover the entire screen. Even though I have provided the code I used, only a quarter of the top of the screen appears black when wrapping something in the component.
Here is the code snippet from Home.js:
import React from 'react'
import styled from "styled-components";
import Background from './images/Cryptid.png'
const Home = () => {
return (
<Container>
<InnerContainer>
<Logo />
<JoinInfo><p>test</p></JoinInfo>
</InnerContainer>
</Container>
)
}
const Container = styled.div`
display: flex;
height: 100%;
width: 100%;
background: black;
background-size: cover;
`;
const InnerContainer = styled.div`
height: 100%;
width: 100%;
`;
const Logo = styled.div`
border: 1px solid red;
margin: auto;
padding: auto;
height: 100px;
width: 400px;
background-image: url(${Background});
`
const JoinInfo = styled.section`
color: white;
`
export default Home;