How to Style Primary Menu with Active Class

It looks like you might be confusing the :active CSS pseudo class and an actual .active class. The pseudo class represents an element that is being activated by the user. It is not the active page.

If you want to use the active class on the current page, you can use the nav_menu_css_class filter to add to the nav menu classes.

function wpse_nav_menu_css_class( array $classes, $item, $args, $depth ) {
  if( in_array( 'current-menu-item', $classes ) ) {
    $classes[] = 'active';
  }
  return $classes;
}
add_filter( 'nav_menu_css_class', 'wpse_nav_menu_css_class', 10, 4 );

Then, to style the active class,

.main-navigation, #primary-menu .active a {
    color: #4d4d4d !important;
}

Otherwise, you can use the current-menu-item class instead. (Note the hyphens and not underscores)

.main-navigation, #primary-menu .current-menu-item a {
    color: #4d4d4d !important;
}