<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    /* General */
    body{
      background-color: #000000;
    }

    /* ------- */

    /* 1.0 - Menu de navegación */

    #menu{
      list-style-type:none;
      margin:0;
      padding:0;
      top:0;
      position:fixed;
    }

    #menu li{
      float: left;
      width: 20%;
    }
    #menu li:first-child a{
      background-color:gray;
    }
    #menu li a{
      background-color: black;
      color: white;
      display: block;
      padding: 16px 16px 16px 16px;
      text-align:center;
      font-family: monospace;
      text-decoration:none;
      border-bottom: 2px solid white;
    }
    #menu li a:hover{
      background-color:gray;
    }
    /* ------------------------- */


<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Astro cosmos</title>
      <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" type="text/css">
      </head>
    <body>
       <ul id="menu">
        <li><a href="home.html">Inicio</a></li>
        <li><a href="maths.html">Matemáticas</a></li>
        <li><a href="physics.html">Física</a></li>
        <li><a href="computacion.html">Computación</a></li>
        <li><a href="others.html">Otros</a></li>
      </ul>

    </body>
    </html>

<!-- end snippet -->



***Si se dan cuenta, la palabra computación solo queda en "computacio", cual es el error? estoy aprendiendo css3 hace poco y voy aprendiendo, pero coloqué el texto de los `<a>` (que están dentro de los `<li>` ), con `display:block`(para que se comporte como un bloque) y con el texto centrado, entonces porqué tampoco se ve?***