CSS/HTML - Word Spacing in Chrome not working

Question

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.

CSS:

/* 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);
}

Answer 1

The reason it's not working is because you're using the <center> element. This element is obsolete. You should use CSS to determine its position (you could put text-align: center; on .navigation.) Don't use obsolete elements. Once you do that, the word-spacing works fine.

http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/ help to check your page for syntax errors humans can easily miss. They are an invaluable tool for people developing websites.