CSS / Flexbox与百分比填充重叠

Question

为什么li项重叠，并从容器的右侧戳出来？我以为flexbox应该让这个东西更简单？哈哈

我似乎无法在左下方获得带有百分比填充的项目，以便使用flexbox正确分发。我不理解的是什么？

请参阅我的code pen以获取示例。

我正在使用：

<ul>
    <li><a href="" class="btn">Link Text 1</a></li>
    <li><a href="" class="btn">Link Text 2</a></li>
</ul>

这是CSS（SCSS）：

a {
    display: inline-block;
    text-align: center;
    color: #3b3c43;
    border: 1px solid #3b3c43;
    border-radius: 4px;
    padding: .75em 15%;
    text-decoration: none;
    font-family: helvetica, arial, sans-serif;
    font-size: .85em;
    white-space: nowrap;
    &:hover {
        color: #fff;
        background-color: #3b3c43;
    }
}
ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    outline: 1px dotted blue;
    width: 80%;
    margin: 1em auto;
}
li {
    outline: 1px dotted red;
}