title: html menu without separation
body: <p>I have a menu of 6 items, but they are all pasted, there is no separating space between them, I am using a css file.</p>
  <p>admin.html</p>
  <pre><code> &lt;html lang=&quot;zxx&quot;&gt;
    &lt;head&gt;
    &lt;title&gt;Home&lt;/title&gt;
    &lt;!-- Meta-Tags --&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;keywords&quot; content=&quot;Core Login Form a Responsive Web Template, Bootstrap Web Templates, Flat Web Templates, Android Compatible Web Template, Smartphone Compatible Web Template, Free Webdesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design&quot;&gt;
     &lt;!-- //Meta-Tags --&gt;
     &lt;!-- Index-Page-CSS --&gt;
     &lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot; type=&quot;text/css&quot; media=&quot;all&quot;&gt;
     &lt;!-- //Custom-Stylesheet-Links --&gt;
     &lt;!--fonts --&gt;
     &lt;link href=&quot;//fonts.googleapis.com/css?family=Mukta+Mahee:200,300,400,500,600,700,800&quot; rel=&quot;stylesheet&quot;&gt;
     &lt;!-- //fonts --&gt;
     &lt;!-- Font-Awesome-File --&gt;
     &lt;link rel=&quot;stylesheet&quot; href=&quot;css/font-awesome.css&quot; type=&quot;text/css&quot; media=&quot;all&quot;&gt;
     &lt;/head&gt;
     &lt;body&gt;
     &lt;h1 class=&quot;title-agile text-center&quot; style=&quot;color: #000;&quot;&gt;Area Administrativa&lt;/h1&gt;
     &lt;div class=&quot;content-w3ls&quot;&gt;
        &lt;div class=&quot;agileits-grid&quot;&gt;
            &lt;div class=&quot;content-bottom&quot; &gt;
                 &lt;a href=&quot;subir.php&quot; &gt;Subir archivo&lt;/a&gt;
            &lt;/div&gt;
            &lt;br&gt;
            &lt;br&gt;
            &lt;br&gt;
            &lt;br&gt;
            &lt;div class=&quot;content-bottom&quot;&gt;
                &lt;a href=&quot;buscar.php&quot; &gt;Buscar rchivo&lt;/a&gt;
            &lt;/div&gt;
            &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;div class=&quot;content-bottom&quot;&gt;
  
              &lt;a href=&quot;admin.php?copia=realizar&quot; &gt;Realizar Copia de Seguridad de archivo&lt;/a&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;div class=&quot;content-bottom&quot;&gt;
  
              &lt;a href=&quot;acceso.php&quot; &gt;Registro de  Accesos&lt;/a&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;div class=&quot;content-bottom&quot;&gt;
              &lt;a href=&quot;salir.php&quot; &gt;Salir del sistema&lt;/a&gt;
          &lt;/div&gt;
         &lt;/div&gt;
        &lt;/div&gt;
      &lt;div class=&quot;copyright text-center&quot;&gt;
      &lt;p&gt;© 2020 Sistema Gestion Documentos ISO15489
      &lt;/p&gt;
      &lt;/div&gt;
      &lt;!--//copyright--&gt;
     &lt;/body&gt;
     &lt;!-- //Body --&gt;
     &lt;/html&gt;
  </code></pre>
  <p>css file this contains the css styles applied to the html</p>
  <pre><code> title-agile {
   font-size: 2.8em;
   font-weight: 600;
   text-transform: uppercase;
   color: #ffffff;
   letter-spacing: 3px;
   word-spacing: 3px;
   margin: 1em 1vw 1em;
   text-align: center;
   font-family: 'Mukta Mahee', sans-serif;
   }
  
   .text-center {
   text-align: center;
   }
  
   .content-w3ls {
   display: -webkit-flex;
   display: -webkit-box;
   display: -moz-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   justify-content: center;
   align-items: center;
   -webkit-box-pack: center;
   - moz-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
   }
  
  .agileits-grid {
   max-width: 500px;
   margin: 0 5vw;
   margin-bottom: 20px;
   padding: 3.5vw;
   box-sizing: border-box;
   display: flex;
   display: -webkit-flex;
   flex-wrap: wrap;
   background: rgba(249, 249, 249, 0.24);
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.49);
   }
   .content-bottom {
      margin-bottom: 20px;
      padding: 1em;
   }
  </code></pre>
  <p>the page looks like this, but the content text of the divs overlaps</p>
  <p><a href="https://i.stack.imgur.com/Afu54.jpg" rel="nofollow noreferrer">https://i.stack.imgur.com/Afu54.jpg</a></p>
  <p>I have modified the css file with margin-bottom, but it doesn't work.</p>