Struggling with aligning a header? The CSS property of the header is inherited from the app's CSS file. For example, in the image below, "Our Mission" is the header that needs to be left-aligned. Looking for some assistance here. You can find the app.js and app.css files in this CodeSandbox link: https://codesandbox.io/s/summer-hooks-527rx9?file=/src/App.js
https://i.sstatic.net/lJXht.jpg
https://codesandbox.io/s/summer-hooks-527rx9?file=/src/App.js
app.js:
import "./styles.css";
export default function App() {
return (
<div id="app">
<img id="home-background-image" />
<div id="project-header">
<p id="project-exp">Test Site Name</p>
</div>
<div id="project-mission-header">
<h2>Our Mission</h2>
</div>
</div>
);
}
styles.css
#app {
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
#home-background-image {
width: 100%;
height: 350px;
background: url("https://png.pngtree.com/thumb_back/fh260/background/20201026/pngtree-futuristic-shape-abstract-background-chemistry-technology-concept-for-website-image_438818.jpg");
background-size: cover;
}
#project-header {
position: absolute;
top: 100px;
color: white;
}
#project-exp {
font-size: 3rem;
font-weight: 600;
margin: 0;
}
#project-mission-header {
width: 810px;
justify-content: left;
}