Finally got my navbar to center...now my effects won't work

Question

So I started with floating my li items and using the property display:inline; but I couldn't get it to center. Then I found the solution on stack exchange by removing the floats and using text-align and display:inline-block. But now my effects won't work! Is it not possible to have the menu centered and still have the list links rotate when hovering? Or is it an either or sort of situation? Thanks for your help!

ul {
	text-align:center;
}
li {
	list-style:none;
	margin-right:1em;
	font-family:'Special Elite', cursive;
	font-size:25px;
	padding:12px;
	display:inline-block;
}
li a {
	color:#D0903C;
	background-color:#7A4909;
	text-decoration:none;
}
.left a:hover {
	color:#7A4909;
	background-color:#D0903C;
	-webkit-transform:rotate(-10deg) scale(1.2);
	   -moz-transform:rotate(-10deg) scale(1.2);
	     -o-transform:rotate(-10deg) scale(1.2);
	text-transform:uppercase;
}
.right a:hover {
	color:#7A4909;
	background-color:#D0903C;
	-webkit-transform:rotate(10deg) scale(1.2);
	   -moz-transform:rotate(10deg) scale(1.2);
	     -o-transform:rotate(10deg) scale(1.2);
	text-transform:uppercase;
}

<ul class="navbar">
  <li class="left"><a href="home.html">Home</a></li>
  <li class="right"><a href="contact.html">Contact Me</a></li>
  <li class="left"><a href="blog.html">Blog</a></li>
  <li class="right"><a href="funny.html">Funny</a></li>
</ul>

Answer 1

You need to set anchor elements to be inline blocks.

ul {
	text-align:center;
}
li {
	list-style:none;
	margin-right:1em;
	font-family:'Special Elite', cursive;
	font-size:25px;
	padding:12px;
	display:inline-block;
}
li a {
	color:#D0903C;
	background-color:#7A4909;
	text-decoration:none;
    display: inline-block;

}
.left a:hover {
	color:#7A4909;
	background-color:#D0903C;
	-webkit-transform:rotate(-10deg) scale(1.2);
	   -moz-transform:rotate(-10deg) scale(1.2);
	     -o-transform:rotate(-10deg) scale(1.2);
	text-transform:uppercase;
}
.right a:hover {
	color:#7A4909;
	background-color:#D0903C;
	-webkit-transform:rotate(10deg) scale(1.2);
	   -moz-transform:rotate(10deg) scale(1.2);
	     -o-transform:rotate(10deg) scale(1.2);
	text-transform:uppercase;
}

<ul class="navbar">
  <li class="left"><a href="home.html">Home</a></li>
  <li class="right"><a href="contact.html">Contact Me</a></li>
  <li class="left"><a href="blog.html">Blog</a></li>
  <li class="right"><a href="funny.html">Funny</a></li>
</ul>