Bootstrap 4容器大于移动屏幕宽度

Question

我为我的新项目跳转到Bootstrap 4，现在当我在手机上测试时，容器跨越我的移动设备的宽度（iphone和android galaxy s8）我不知道这是否是由于flexbox有问题吗？

无论如何，这里是我的代码和图像，以显示我在说什么......

<div class="container">
    <div class="row mb-4">
        <div class="col-xl-8 col-lg-7 col-12 mt-4">
            <h2 class="lead">Courses</h2>

            <div class="course-cards" id="course-cards">
                <%= render "course-cards" %>
            </div>          

            <button class="mt-4 btn btn-secondary btn-full" id="add-course">
                <i class="fa fa-plus-square-o large"></i>
            </button>
        </div>      
        <div class="col-xl-4 col-lg-5 col-12 mt-4">
            <h2 class="lead">Result</h2>
            <div class="well mt-4 main-result-box">
                <div class="well dark mt-0 text-center">
                    <p class="result big-text text-success mb-0">--</p>
                </div>
                <button data-toggle="tooltip" data-placement="top" title="Re Calculate" level="college" class="calculate btn btn-success btn-full mt-4">
                    <i class="fa fa-calculator small"></i>
                    Calculate
                </button>
            </div>
            <div class="clear"></div>
            <h2 class="lead mt-4">Help</h2>
            <div class="well mt-4">
                <h4>How To</h4>

                <ol class="circle mt-4">
                    <li>
                        <strong>Enter Your Course Info</strong>
                        <p>Fill out the information in each course block including your Grade and the amount of units received for each.</p>
                    </li>
                    <li>
                        <strong>Add Courses if Neccessary</strong>
                        <p>If necessary, add course by clicking the blue button below the course blocks.</p>
                    </li>
                    <li>
                        <strong>Finish Up</strong>
                        <p>Your GPA will be calculated automatically and appear in the green box below the Add Course button. </p>
                    </li>
                </ol>
            </div>
        </div>
    </div>
</div>

以下是我正在谈论移动设备的图片：