Firefox not displaying flexbox properties

Hello,

I recently developed a website with help from How to Build a Wordpress Theme and the CSS Deep Dive. I've uploaded it to my server and am now testing the site in different browsers to make sure it all works.

I'm using Flexbox for my navigation bar only. It seems to be working fine in all browsers (Safari, Chrome, Opera, my iPhone) except for Firefox (and I'm assuming IE since I haven't had the chance to hop onto a PC yet).

While in Firefox I "inspected" my nav "element" and when scrolling through the styles, my

.nav {
display: -moz-box;
}

and

.nav a {
-moz-box-flex: 1;
}

were not showing up. When I added them in right there in the style editor, it fixed the problem. But obviously it was a temporary fix. I've gone back into my style.css file and triple checked for typos etc. I've re-uploaded my CSS file and then cleared the cache in Firefox. But to no avail. For some reason Firefox seems to be ignoring or not seeing my Flexbox properties in my style.css file.

I have no idea what could be causing this. Any idea what I'm missing? Suggestions on what I'm doing wrong?

The website in question is: www.jennhinkle.com/mark

The CSS code in question is (maybe someone else can catch my typo :) ):

.nav a {
    text-decoration: none;
    color: #FFF;
    display: block;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    font-size: 15px;
    float: left;
    text-align: center;
}

.nav {
    display: -webkit-box;
    display: -moz-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;
    display: flex; 
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-flexbox-orient: horizontal;
    -webkit-flex-orient: horizontal;
    flex-orient: horizontal;
    width: 700px;
    margin: auto;
    padding: 12px;
    border-bottom: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
}

As always, thanks for any help!! Jenn