Q: ¿Como hago para que cuando el usuario pasé por encima de mi palabra se muestre en color rojo? Lo que sucede es que ví que se podia usar la etiqueta &:hover{} , pero creo que eso ya no funciona en html 5, por que vi que la anidaban dentro de un #header{ &:hover{}} asi fue que la vi , pero eso creo que ya no se puede hacer en html. Aqui les dejo parte de mi codigo, el problema que tengo es que al momento de pasar el click por alguna palabra que tengo dentro de mi etiqueta a, no se muestran del color que yo quiero. Y ya lo intenté con &:hover pero creo que asi no va la etiqueta.
    *{
    margin: 0px; padding: 0px;
    box-sizing: border-box;
    font-family: 'Exo 2', sans-serif;
    text-transform: capitalize;
    transition: all .2s linear;
}
html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body{
    overflow-x: hidden;
}

#header{
    width: 100%;
    position: fixed;
    top: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 4rem;
    z-index: 1000;
}

#header > .logo > img {
    height: 5rem;
}

#header > nav > ul{
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style: none;
}

#header > nav > ul > li{
    margin-right: 4rem;
}
#header > nav > ul > li > a{
    color: #fff;
    font-size: 2rem;
}


A: deberias probar de esta manera:
*{
   margin: 0px; padding: 0px;
   box-sizing: border-box;
   font-family: 'Exo 2', sans-serif;
   text-transform: capitalize;
   transition: all .2s linear;
}
html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body{
    overflow-x: hidden;
}

#header{
    width: 100%;
    position: fixed;
    top: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 4rem;
    z-index: 1000;
}

#header > .logo > img {
    height: 5rem;
}

#header > nav > ul{
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style: none;
}

#header > nav > ul > li{
    margin-right: 4rem;
}
#header > nav > ul > li > a{
    color: #fff;
    font-size: 2
}
.clase_de_a:hover{
    style:color_a_elegir
}

y como consejo personal deberias estudiarte metodologia bem.
consiste en utilizar class para las etiquetas generales y ID para las especificas,gracias a eso te aseguras a no tener conflictos entre estilos.
ejemplo.
#header{
    width: 100%;
    position: fixed;
    top: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 4rem;
    z-index: 1000;
}

.header__img{
    height: 5rem;
}

.nav__ul{
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style: none;
}

y asi con todo,espero que sea de ayuda.

A: No se si te refieres a esto
*{
    margin: 0px; padding: 0px;
    box-sizing: border-box;
    font-family: 'Exo 2', sans-serif;
    text-transform: capitalize;
    transition: all .2s linear;
}
html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body{
    overflow-x: hidden;
}

#header{
    width: 100%;
    position: fixed;
    top: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 4rem;
    z-index: 1000;
}

#header > .logo > img {
    height: 5rem;
}

#header > nav > ul{
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style: none;
}

#header > nav > ul > li{
    margin-right: 4rem;
}
a:hover{
    color:red;
    font-size: 2rem;
}

Si es asi, solo es cosa que la ponga en la clase que necesitas y listo
