CSS lista-horizontal

Así que estoy tratando de copiar esta plantilla de sitio web: enlace

Quiero hacer que los elementos de la lista sean horizontales, como en el enlace anterior, pero simplemente no funciona con la display:inline block que es lo que he visto de Google y este foro, también intenté usar float. He intentado buscar en varias formas, incluyendo el uso de una table pero tampoco funciona. Probablemente sea un error estúpido que estoy pasando por alto, pero parece que no puedo encontrar una solución.

HTML:

      title   

Belle & Carrie

rehabilitation yoga
  • Home
  • About
  • Contact Us

CSS:

 body { background: #077054; color: #315f52; } .header { text-align: center; } .header a { text-decoration: none; color: #99fa99; font-size: 20px; font-weight:normal; font-family: "latoregular"; } .header span { color: #b6d8cf; font-size: 26px; text-transform: uppercase; font-family: 'nixie_oneregular'; } .listHorizontal { color: #b6d8cf; font-size:30px; text-transform: uppercase; list-style: none; display:inline-block; } 

Puedes hacerlo de la siguiente manera:

 body { background: #077054; color: #315f52; } .header { text-align: center; } .header a { text-decoration: none; color: #99fa99; font-size: 20px; font-weight:normal; font-family: "latoregular"; } .header span { color: #b6d8cf; font-size: 26px; text-transform: uppercase; font-family: 'nixie_oneregular'; } .listHorizontal { display: flex; justify-content: space-around; color: #b6d8cf; font-size:30px; text-transform: uppercase; list-style: none; } 
  

Belle & Carrie

rehabilitation yoga
  • Home
  • About
  • Contact Us

Si usa la display:flex los elementos alineando horizontalmente. A continuación, puede aplicar muchos más estilos al contenedor o los niños para empujar el contenido.

Flexbox

 body { background: #077054; color: #315f52; } .header { text-align: center; } .header a { text-decoration: none; color: #99fa99; font-size: 20px; font-weight:normal; font-family: "latoregular"; } .header span { color: #b6d8cf; font-size: 26px; text-transform: uppercase; font-family: 'nixie_oneregular'; } .listHorizontal { color: #b6d8cf; font-size:30px; padding:0; text-transform: uppercase; list-style-type: none; display:flex; justify-content:space-evenly; } 
 

Belle & Carrie

rehabilitation yoga
  • Home
  • About
  • Contact Us
  • Test

Agrega este css, funcionará

 .listHorizontal li { display: inline; } 
 .listHorizontal li { display: inline-block; }