html - 嵌套的 div 不会在框内创建框？

Question

我正在创建一个占页面 50% 的部分。在该部分中，我想放置一个包含两行的文本框，这些文本将与列表中的元素符号点对齐到右侧。如果我嵌套 div，为什么不将框放在主要部分内？

<div class="content">
        <h2>Brigham Young University</h2>
        <h3><span>Computer Engineering, Minor in Computer Science</span></h3>
        <ul>
            <li>3.36 GPA</li>
            <li>4.0 STEM GPA</li>
        </ul>
        <div id="grad_date">
            <p>Provo, UT <br>
                Expected 2018</p>
        </div>
    </div>

CSS:

.content {
    border-width: 3px;
    border-style: solid;
    border-color: black;
    margin-left: 15px;
    margin-right: 15px;
    width: 50%;
}

.content #grad_date {
    border-width: 2px;
    border-color: red;
    border-style: solid;
    width: 100px;
    float: right;
}

Answer 1

添加display: inline-block;到.content:

JS Fiddle