I am trying to add a navbar to my ReactJS website and I am trying to add a navbar to my website.
It need the navbar to be on 100% width. I tried using 'width: 100%;'. But it will not make the header 100% .
Here is my Code:
ReactJS:
import React from 'react';
import './Header.css';
function Header() {
return (
<nav className="header">
<a href="#">Home</a>
<p> </p>
<a href="#">About</a>
<p> </p>
<a href="#">Projects</a>
<p> </p>
<a href="#">Resume</a>
</nav>
)
}
export default Header;
CSS:
.header > a {
background-color: #171A25;
text-decoration: none;
color: white;
text-align: center;
word-spacing: 33px;
}
.header {
background-color: #171A25;
align-items: center;
word-spacing: 33px;
padding: 1em 1.5em;
}
Just remove the <p>
tags.
.header > a { background-color: #171A25; text-decoration: none; color: white; text-align: center; word-spacing: 33px; } .header { background-color: #171A25; align-items: center; // justify-content: space-around; // display: flex; word-spacing: 33px; padding: 1em 1.5em; }
<nav class="header"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Projects</a> <a href="#">Resume</a> </nav>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.