Link will not change color and get rid of text-decoration-CodePudding

I am trying to make a header. I am trying to change the color of the text in my navbar and get rid of text decoration. Here is my code:

ReactJS:

import React from 'react';

import './Header.css';

function Header() {
    return (
        <nav className="header">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Projects</a>
            <a href="#">Resume</a>
        </nav>
    )
}

export default Header;`

CSS:

.header {
    background-color: #171A25;
    align-items: center;
    color: white;
    word-spacing: 33px;
    text-align: center;
}

CodePudding user response：

a{
  color: white;
  text-decoration: none;
}

CodePudding user response：

You need to style the direct children a links of the header.

.header {
    background-color: #171A25;
    align-items: center;
    word-spacing: 33px;
}

.header > a {
  text-decoration: none;
  color: white;
  text-align: center;
}

import React from 'react';

import './Header.css';

function Header() {
    return (
        <nav className="header">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Projects</a>
            <a href="#">Resume</a>
        </nav>
    )
}

export default Header;