navbar links color - center in grid

Question

I am so confused been at this for a white. I am trying to do 2 things.

1. Change the color of the links, a:link, a:visited, a:hover
2. Center all the items in the header (grid)

.container {
  width: 100%;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
}

.header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  margin: 0;
  padding: 0;
  border-bottom: 3px solid #DAC896;
  text-align: center;
  background-color: #333;
}

.header > div {
  color: white;
  font-size: 4vw;
  padding: 0;
  align-items: center;
  text-align: center;
}

.logo,
.navbar,
.buttons {
  grid-row: 1;
}

.logo {
  grid-column: 1 / 3;
}

.navbar {
  grid-column: 2 / 3;
}

.buttons {
  grid-column: 3 / 3;
}

.navbar {
  background-color: #333;
  border: none;
}

.navbar > li > a {
  text-align: center;
}

.navbar-nav a:link {
  color: white;
  text-decoration: none;
}

.navbar-nav a:visited {
  color: white;
  text-decoration: none;
}

.navbar-nav a:hover {
  color: white;
  background-color: #111;
}

The link is: Corinth Shop

Answer 1

Your links are not white because an already existing selector is taking precedence. The reason you're not seeing the links as white is because the first line of CSS is more specific. CSS selectors have a specificity hierarchy, therefore the more specific selector will take precedence without taking in to account the order the selectors are in the CSS file.

Let's compare the two selectors;

The one that is overriding your own CSS

.navbar-default .navbar-nav > li > a

Your own CSS

.navbar-nav a:link { color: white; text-decoration: none; }

Change YOUR CSS to;

.navbar-default .navbar-nav > li > a { color: white; text-decoration: none; }

This will then make, at the very least, your specificity match that of the selector that is currently 'winning'.

This should work, assuming that your styles are called after the other styles.