Css 填充链接在div之外

我有这个，我不明白为什么按钮会延伸到div之外

我怎样才能让他们进入潜水舱

这是CSS

.btn-link {
    font-variant: small-caps;
    text-decoration: none;
    font-size: 1.2em;
    padding: 8px 15px 12px 15px;
    border-radius: 3px;
    background-color: #7dc36b;
    color: #ffffff;
}
div.left-nav {
    float: left;
    width: 200px;
}
div.left-nav > div {
    clear: both;
    width: 100%;
    border: solid 1px red;
}

以下是HTML：

<div class="left-nav">
    <div><a href="" class="btn-link">new story</a>
    </div>
    <div><a href="" class="btn-link">My Stories</a>
    </div>
</div>

---

您可以指定

显示：内联块，因此div将展开以完全固定锚定

.btn-link {
  font-variant: small-caps;
  text-decoration: none;
  font-size: 1.2em;
  padding: 8px 15px 12px 15px;
  border-radius: 3px;
  background-color: #7dc36b;
  color: #ffffff;
  display:inline-block;
}


嘿，希望这对你有用：-


但我希望按钮看起来像that@RyanNaddy更新了答案。
div.left-nav > div {
    overflow: auto; /* removed clear: both; */
    width: 100%;
    border: solid 1px red;
}

div.left-nav > div > a {
    display: inline-block;
}

<div class="left-nav">
<div class="btn"><a href="" class="btn-link">new story</a>
</div>
<div class="btn"><a href="" class="btn-link">My Stories</a>
</div>

.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 8px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
}
div.left-nav {
   float: left;
   width: 200px;

}
div.left-nav > div {
  clear: both;
  width: 100%;
  border: solid 1px red;
  }
.btn{
 padding:8px 15px 8px 15px;
  }