我试图在块中包含两列，但是，内容在块外部溢出。我该如何解决？

Question

我试图在我的区块中包含两列。代码的结果是我的项目符号列表超出了块区域。我该如何解决问题？

这是我的代码段：

#education{
    padding:50px 15px 20px 15px;
    border-bottom:1px solid #dcd9d9;
    text-align:center}
#education h2{color:#374054;margin-bottom:50px}
.education-block{
    max-width:700px;
    margin:0 auto 30px auto;
    padding:15px;
    border:1px solid #dcd9d9;
    text-align:left;
}
.education-block h3{
    font-weight:500;
    float:left;
    margin:0;
    color:#374054
}
.education-block span{
    color:#74808a;
    float:right}
.education-block h4{
    color:#74808a;
    clear:both;
    font-weight:500;
    margin:0 0 15px 0}
.education-block p,.education-block ul{
    margin:0;
    color:#74808a;
    font-size:0.9em
}
.education-block ul{padding:0 0 0 15px}

<div id="education">
        <h2 class="heading">Education</h2>
        <div class="education-block">
            <h3>A University</h3>
            <span class="education-date">Sep 2018 - Present</span>
            <h4>Master of Computer Science</h4>
            <p>
                The courses intened to take are:
            </p>
            <div class="col-xs-6">
                <p>A:</p>
                <ul>
                    <li>
                        B
                    </li>
                    <li>
                        C
                    </li>
                    <li>
                        D
                    </li>
                </ul>
            </div>
            <div class="col-xs-6">
                <p>E:</p>
                <ul>
                    <li>
                        F
                    </li>
                    <li>
                        G
                    </li>
                    <li>
                        H
                    </li>
                </ul>
            </div>
        </div>
</div>

在这种情况下，BCD和FGH不包含在教育版块内。我正在尝试解决这个问题。

Answer 1

我不确定您的外观如何，但是由于这些特例，我认为您正在使用引导程序并尝试获取两个带有列表的列。

在这种情况下，您必须将所有内容包装在具有类行的div中，并将其包装在具有类容器或容器流体的div中，例如：

<div id="education">
        <h2 class="heading">Education</h2>
        <div class="education-block">
            <h3>A University</h3>
            <span class="education-date">Sep 2018 - Present</span>
            <h4>Master of Computer Science</h4>
            <p>
                The courses intened to take are:
            </p>

         <div class="container">
          <div class="row">

             <div class="col-xs-6">
                <p>A:</p>
                <ul>
                    <li>
                        B
                    </li>
                    <li>
                        C
                    </li>
                    <li>
                        D
                    </li>
                </ul>
             </div>

             <div class="col-xs-6">
                <p>E:</p>
                <ul>
                    <li>
                        F
                    </li>
                    <li>
                        G
                    </li>
                    <li>
                        H
                    </li>
                </ul>
             </div> 

           </div> <!-- Row -->              
         </div> <!-- Container-->

        </div>
</div>