Nav bar is not displaying inline

I need to display the nav bar links all next to each other and in the center of the viewport. I cant seem to figure out why it wont. Please take a look at my code and let me know what Im doing wrong:

'''HTML

<div class="main-nav"> <h2 class="name" id="top">Cheryl Casteling</h2> <ul class="nav"> <li><a href="index.html">HOME</a></li> <li><a href="#portfolio">PORTFOLIO</a></li> <li><a href="#contact">CONTACT</a></li> </ul> </div>

'''CSS

.main-nav li a { color: black; background-color: #fafafa; padding: 5px 5px; display: block; text-decoration: none; margin: 2px 0 0 0; }

.main-nav, .main-content, .contact, .profile-image, .intro { text-align: center; }

/* ///// MEDIA QUERIES ////// */

@media (min-width: 768px) { .main-nav li a { display: inline-block; text-align: center; vertical-align: top;

}

.nav {
    display: inline-block;
    text-align: center;
}

}