jQuery's .css() doesn't work

Adding document to your ready function is a must for the script to know what its waiting for or else it doesn't know what its "ready" for. I removed the important tags and fixed the jQuery function and this works:

jQuery(document).ready(function($) {
  if ($("body").hasClass("logged-in")) {
    $(".logged-out-button").css("display", "none");
    $(".logged-in-button").css("display", "inline");
  }
});

You can view the codepen here: http://codepen.io/erwstout/pen/zqpREW

remove !important value, or you can use $( ".logged-out-button" ).hide(); jquery function

Try like this:

<li class="menu-item menu-item-type-post_type menu-item-object-page logged- out-button"><a href="http://www.savingaddicts.com/wp-login.php?action=register"> <span>Register</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page logged-out-button"><a href="http://www.savingaddicts.com/wp-login.php?action=login"><span>Login</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page logged-in-button"><a href="http://www.savingaddicts.com/wp-login.php?action=logout"><span>Logout</span></a></li>

$("document").ready(function(){

if ($( ".menu-item" ).hasClass( "logged-in-button")) {
    $( ".logged-out-button" ).css( "display", "none" );
    $( ".logged-in-button" ).css("display", "inline");   
  }
 });

Fiddle: http://codepen.io/anon/pen/repJyY

You can use .css("cssText", "display:none !important") just like mentioned here.

So your code would look like:

jQuery(document).ready(function($) {
  if ($("body").hasClass("logged-in")) {
    $(".logged-out-button").css("cssText", "display:none !important");
    $(".logged-in-button").css("cssText", "display:inline !important");
  }
});

JsFiddle

A page can't be manipulated safely until the document is "ready"
jQuery can detect this state of readiness for you.

To wait for your document to become ready in with jQuery use:

$(document).ready(function() {
  // your document is ready do something amazing
});

To wait for your document to become ready in without jQuery use:

document.addEventListener("DOMContentLoaded", function(event) {
  // your document is ready do something amazing
});

To wait for your window to COMPLETELEY load with jQuery use:

$(window).load(function() {
  // your window has completely loaded do something amazing here
});

To wait for your window to COMPLETELEY load without jQuery use:

window.onload = function() {
  // your window has completely loaded do something amazing here
};

Your code did not work because you did not wait for the window to load or the document to become ready.
You can add $.fn.ready(...); to your code like this:

$(document).ready(function() {
  if($("body").hasClass("logged-in")) {
    $(".logged-out-button").css("display", "none");
    $(".logged-in-button").css("display", "inline");
  }
});

You can even wait for the document to completely load (images and all) like this:

$(window).load(function() {
  if($("body").hasClass("logged-in")) {
    $(".logged-out-button").css("display", "none");
    $(".logged-in-button").css("display", "inline");
  }
});

Also remember that you can make showing and hiding elements easier by using $.fn.hide(...); and $.fn.show(...).
You can also toggle elements using $.fn.toggle(...)

You can even animate elements when you display or hide them using:

1. $.fn.fadeOut(...);
2. $.fn.fadeIn(...);
3. $.fn.fadeToggle(...);
4. $.fn.slideOut(...);
5. $.fn.slideIn(...);
6. $.fn.slideToggle(...);

For more info on effects in jQuery you can read the docs here