I've been developing this website using React and Material UI, and I chose to implement standard CSS for styling. However, after closing my code editor and reopening it, some parts of the CSS do not seem to be loading properly. I'm completely puzzled as to what could be causing this issue...
Here is the Codesandbox link: https://codesandbox.io/s/github/JojoDuke/fontsnatcher-landing-page?file=/src/App.js
Main.js (example of a component with CSS issues)
import './Main.css';
import { Typography } from '@mui/material';
import fonts from '../images/fonts.png';
import podcast from '../images/Podcast.svg'
const Main = () => {
return (
<div className="the-div">
<Typography className="header1" variant="h1">Discover the<img className="img-fonts" src={fonts} alt="fonts" width="320"/> being<br/> used on the web</Typography>
<Typography className="header2" variant="h4">Fontsnatcher is a Chrome extension for designers and developers
that<br/> answers the question, "What font is this website using?"</Typography>
<button className="hiw-btn">
See How it works
</button>
<div className="illustration">
<img className="img-podcast" src={podcast} alt="podcast-svg" width="700"/>
</div>
</div>
)
}
export default Main;
Main.css
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&display=swap');
.the-div{
text-align: center;
}
.header1{
font-family: 'Nunito Sans', sans-serif;
font-weight: 700;
margin-top: 160px;
}
.img-fonts{
position: relative;
top: 30px;
}
.header2{
font-family: 'Nunito Sans', sans-serif;
color: #7E7E7E;
}
.hiw-btn{
color: #ffffff;
background-color: #00B2FF;
border: none;
padding: 10px 30px;
font-family: 'Nunito Sans', sans-serif;
font-weight: 600;
font-size: 20px;
margin-top: 50px;
transition: 0.4s;
}
.hiw-btn:hover{
background-color: #67d1ff;
cursor: pointer;
}
.img-podcast{
margin: -200px auto;
}