孩子div在css中没有超越父div

Question

目前,我的网页内容标题如下所示:

但我希望内容看起来像这样:

这是涉及该部分页面的HTML:

<div class="header">My Tools<a href="#possess" class="anchor_link">View Tools you Possess</a></div>

我参与课程的CSS:

#content .header{
    font-size:180%;
    width:1000px;
    border-bottom:1px solid #000000;
}

#content .header .anchor_link{
    font-size:100%;
    text-align:right;
    text-decoration:none;
    color:#0059FF;
}

你能解释一下我在这里做错了什么,这样我才能得到理想的外表吗？

编辑:另外,为什么锚中的文本不会达到100%而不是180%

为了将来参考:我解决了字体大小问题,因为100%是对父div的引用,所以为了使这个文本更小,我将锚的font-size更改为60%

Answer 1

更改

#content .header .anchor_link{
    text-align:right;
}

至

#content .header .anchor_link{
    float:right;
}

在这里小提琴