Persistent underline style from hell

Question

i am a beginner and am following a tutorial on building a restaurant website. i ran into many issues most of which i have been able to solve. however, my h1 element has an underline that will not go away.

these are the styles i applied.

.navbar-brand h1 { /* Restaurant name */
  font-family: 'IBM Plex Mono', monospace;
  color: #6c0000;
  font-size: 1.8em;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 1px 1px 1px #110000;
  margin: 0;
  text-decoration: none;
}

.navbar-brand a:hover, .navbar-brand a:focus, .navbar-brand a:visited {
  text-decoration: none; !important
}

i have consulted chatgpt for over 2 hours, provided my entire code, tried a different browser, cleared cache, disabled all extensions, etc. my css specifies no text decoration in relation to the h1 tag (im using the same css as my instructor for the course im doing).

i used the inspect element to troubleshoot, searching for "underline" as a keyword. the only style i found was already overriden, and toggling it on and off did nothing. pls help lol

Answer 1

You've set styles for the visited, hover and focus states, but not for the a element itself! So just add a, to the start of your link styles.

h1 {
  font-family: 'IBM Plex Mono', monospace;
  color: #6c0000;
  font-size: 1.8em;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 1px 1px 1px #110000;
  margin: 0;
  text-decoration: none;
}

a, a:visited, a:hover, a:focus {
  text-decoration: none !important;
}

<h1><a href="#">Text</a></h1>