Is there a way to make my header extend across the entire page? I attempted using margin-left and right, but it didn't yield the desired outcome.
Header.css
.header{
background: green;
height: 70px;
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 25px;
left: 0;
right: 0;
}
.header-right {
float: right;
}
@media screen and (max-width: 500px) {
.header-right {
float: none;
}
}
The following is from my app.tsx file:
const Header = () => (
<div className = 'header'>
<h1>Instaride</h1>
<div className="header-right">
<Button> Sign In</Button>
<Button> Contact</Button>
</div>
</div>
);
export default Header;
I also tried the following:
body, html{
margin:0;
padding:0;
}