.menu { 
  width: 900px; /* de totale breedte van de menubalk */ 
  list-style-type: none; /* verwijdert de opsommingstekens */ 
  padding: 0; /* verwijdert standaard padding */ 
  margin: 0; /* verwijdert standaard marge */ 
  background-color: transparent; 
  overflow: hidden; /* zorgt dat de balk netjes sluit rondom de knoppen */ 
} 

/* dwingt de 9 lijst-items om strak naast elkaar te staan */ 
.menu li { 
  float: left; /* zet de knoppen horizontaal op één lijn */ 
  width: 95px; /* AANGEPAST: 95px per knop voor een totale balk van 900px */ 
  margin-right: 5px; /* ruimte tussen de knoppen */ 
} 

/* verwijdert de tussenruimte bij de allerlaatste knop zodat het precies 900px blijft */ 
.menu li:last-child { 
  margin-right: 0; 
  width: 100px; /* AANGEPAST: maakt de laatste knop breder om exact 900px te vullen */ 
} 

/* styling the links */ 
.menu a { 
  background-color: #e3eefc; 
  display: block; /* maakt de hele knop klikbaar */ 
  color: black; 
  padding: 5px 0; /* boven- en onderruimte voor de hoogte */ 
  text-decoration: none; /* verwijdert de onderstreping */ 
  font-size: 16px; 
  text-align: center; /* zet de tekst perfect in het midden */ 
  border: 1px solid black; /* zwarte rand rondom de knop */
  box-sizing: border-box; /* zorgt dat de rand de knop niet breder maakt */
} 

.menu a:hover { 
  background-color: #8cbde1; 
}