title: CSS/HTML - Word Spacing in Chrome not working
body: <p>So I searched the other threads but didn't find an answer. My issue is kind of odd in my opinion. I am trying to do word spacing of about 10px to 15px for my navigation links. When I test the page locally by just opening the index file it works. But once I upload it to cpanel it doesn't work. </p>
  
  <p>CSS:</p>
  
  <pre><code>/* Body and Container Styles */
  body {
      background - color: #C8C8C6;
      min - width: 50 % ;
  }
  
  container {
  
      margin - left: auto;
      margin - right: auto;
      width: 100 % ;
      min - width: 1340px;
  
  }
  
  /* Div styles */
  
  div {
      border - radius: 10px;
      overflow: visible;
  }
  
  
  .navigation {
  
      word - spacing: 15px;
      height: 30px;
      background - color: #66CCFF;
      margin-top: 5px;
      margin-right: 150px;
      margin-bottom: 5px;
      margin-left: 150px;
      border: 1px solid;
      border-color: # FFCC66;
      overflow: visible;
      min - width: 800px;
      min - height: 30px;
  
  
  }
  
  ul {
      list - style - type: none;
      margin - top: 2px;
      margin - bottom: 5px;
      padding: 0;
      font - size: x - large;
  }
  
  li {
      display: inline;
  
  }
  
  .left {
      background - color: #FFCC66;
      border: 2px dashed;
      border - color: #66CCFF;
      margin-top:10px;
      height: 250px;
      width: 100px;
      min-height: 500px;
      min-width: 200px;
      float:left;
      overflow: visible;
  }
  
  .right{
      display: inline-block;
      background-color: # FFCC66;
      border: 2px dashed;
      border - color: #66CCFF;
      margin-top:10px;
      height: 500px;
      width: 200px;
      min-height: 250px;
      min-width: 100px;
      float: right;
      overflow: visible;
  }
  
  .middle {    
      display: inline-block;
      margin-left: 5%;
      background-color: # FFCC66;
      border: 2px dashed;
      border - color: #66CCFF;
      margin-top:10px;
      height: 500px;
      width: 800px;
      min-height: 250px;
      min-width: 400px;
      overflow: scroll;
  }
  
  
  
  /* footer style */
  
  footer {
      height: 20px;
      background - color: # 66CCFF;
      margin - top: 10px;
      margin - right: 150px;
      margin - bottom: 5px;
      margin - left: 150px;
      border: 1px solid;
      border - color: #FFCC66;
      overflow: visible;
  }
  
  footer p {
      margin: auto;
      margin - top: 2px;
      margin - left: 5px;
      font - size: x - small;
      text - align: left;
  }
  
  
  /* Media styles */
  
  embed {
      margin - top: 20px;
  }
  
  /* Heading Styles */
  
  h1 {
      text - align: center;
      font - family: Impact,
      Charcoal,
      sans - serif;
  
  }
  
  
  /* link styles */
  
  a: link {
      text - decoration: none;
  }
  a: visited {
      color: white;
  }
  a: hover {
      color: #C8C8C6;
  }
  
  
  /* Paragraph and Text styles */
  
  p {
      text - align: center;
  }
  
  /* Scrollbar */
  
  ::-webkit - scrollbar {
      width: 10px;
  }
  
  ::-webkit - scrollbar - track {
      -webkit - box - shadow: inset 0 0 6px rgba(200, 200, 198, 1);
      border - radius: 7px;
  }
  
  ::-webkit - scrollbar - thumb {
      border - radius: 7px; - webkit - box - shadow: inset 0 0 6px rgba(71, 211, 255, 1);
  }
  </code></pre>