Question

How could I stop the jerkiness in my hover it seems to move a few pixels:

CSS:

header nav ul li{
    list-style:none;
    display:inline-block;
}
header nav li a {
    color:#8f3479;
    text-align:center;
    width:30px;
    padding:15px;
}
header nav li a:hover, .current{
    padding:15px;
    font-weight:bold;
    background-color:#8f3479;
    border-radius:5px;
    color:#fff;
}

HTML:

<header>
        <div class="branding"></div>
            <nav>
                <ul>
                    <li><a class="current" href="#">Home</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            <nav>   
  </header>

Answer 1

It’s happening because of the bold treatment on the hover state. If you add bold to the regular links as well, it will remain the same for both states.
see this fiddle for example – http://jsfiddle.net/ZhM3T/1/