How can I indent wrapped lines in an unordered list?

I would like to be able to indent the wrapped lines of text in an unordered list. The first image below is what I'm getting now and the second is really what I'd like.

I have tried adding a margin-left: 56px; to the header along with a text-indent: -56px; but that had some very crazy results.

You can look at this fiddle to play with the code. https://jsfiddle.net/twestfall/n2Ln9hfp/

HTML:

<header class="l-index-header">
    <ul class="category-nav">
        <li> <a href="http://test2.spinneybeck.com/index.php?/architectural-products">All</a>
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/belting-leather-wall-tiles">Belting Leather + Wall Tiles</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/handrails">Handrails</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/magnetic-backed-leather">Magnetic Backed Leather</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/pulls">Pulls</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/rugs">Rugs</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/floor-tiles" class="is-current">Floor Tiles</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/screens">Screens</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/wall-panels">Wall Panels</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/custom">Custom</a> 
        </li>
    </ul>
</header>

CSS:

.l-index-header {
    *zoom: 1;
    max-width: 50.5em;
    padding-left: 0;
    padding-right: 0;
    margin-right: auto;
}
.category-nav li {
    display: inline-block;
}
.category-nav a {
    font-family: HelveticaNeueLT-Medium, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #acadaf;
    text-decoration: none;
    padding: 0 0.8em;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
}
.category-nav li:first-of-type a {
    border-right: 1px solid #929496;
    padding-right: 1.2em;
    margin-right: 0.2em;
}
.category-nav a:hover {
    color: #2f292a;
    background-color: #e6e7e8;
}
.category-nav a.is-current {
    color: #2F292A;
}

Solution

Another solution is to just add these styles:

.category-nav {
    margin-left: 1.7em;
}
.category-nav li:first-child {
    margin-left: -4.7em;
}

.l-index-header {
    *zoom: 1;
    max-width: 50.5em;
    padding-left: 0;
    padding-right: 0;
    margin-right: auto;
}
.category-nav {
    margin-left: 1.7em;
}
.category-nav li:first-child {
    margin-left: -4.7em;
}
.category-nav li {
    display: inline-block;
}
.category-nav a {
    font-family: HelveticaNeueLT-Medium, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #acadaf;
    text-decoration: none;
    padding: 0 0.8em;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
}
.category-nav li:first-of-type a {
    border-right: 1px solid #929496;
    padding-right: 1.2em;
    margin-right: 0.2em;
}
.category-nav a:hover {
    color: #2f292a;
    background-color: #e6e7e8;
}
.category-nav a.is-current {
    color: #2F292A;
}

<header class="l-index-header">
    <ul class="category-nav">
        <li> <a href="http://test2.spinneybeck.com/index.php?/architectural-products">All</a>
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/belting-leather-wall-tiles">Belting Leather + Wall Tiles</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/handrails">Handrails</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/magnetic-backed-leather">Magnetic Backed Leather</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/pulls">Pulls</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/rugs">Rugs</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/floor-tiles" class="is-current">Floor Tiles</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/screens">Screens</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/wall-panels">Wall Panels</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/custom">Custom</a> 
        </li>
    </ul>
</header>