Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

138
Views
ReactJS navbar will not load 100%

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;
}
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!