如何在Foundation 6网格中插入全屏边框

Question

我应该在Foundation 6中制作一个html页面，但全屏边框出现问题。

我尝试在CSS中使用before和after来实现以下代码，但结果却没有得到很好的结果

<section class="grid-container-background margin-t0 firstSect">
    <div class="grid-container titleContainer">
        <div class="grid-x">
            <div class="cell small-12 medium-9 medium-offset-3 large-11 large-offset-1 section-title">
                <h2 class="right-border title blueTitle">Lorem ipsum dolor sit amet </h2>
            </div>
            <div class="cell small-12 medium-6 medium-offset-3 large-10 large-offset-1">
                <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem
                    ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. 
                </p>
            </div>
        </div>
    </div>
</section>
<section class="grid-container-background blue margin-t0 secondSect">
    <div class="grid-container titleContainer">
        <div class="grid-x">
            <div class="column small-12 medium-6 large-6">
                <div class="cell small-12 large-6 section-title">
                    <h3 class="left-border title whiteTitle text-center">
                        Lorem ipsum dolor sit amet 
                        <br />consectetur adipisci elit
                    </h3>
                </div>
                <div class="cell small-12 medium-6 medium-offset-3 large-9 large-offset-2">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem
                        ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. 
                    </p>
                </div>
            </div>
            <div class="column small-12 medium-6 large-6">
                <div class="cell small-12 large-6 section-title">
                    <h3 class="left-border title whiteTitle text-center">
                        Lorem ipsum dolor sit amet 
                        <br />consectetur adipisci elit
                    </h3>
                </div>
                <div class="cell small-12 medium-6 medium-offset-3 large-9">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem
                        ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. 
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .grid-container-background.blue {
    background-color: #00AEEF;
    }
    .grid-container.titleContainer {
    width: 100%;
    margin: 0;
    max-width: 100%;
    padding: 0;
    margin-right: 0px;
    margin: 0 auto;
    }
    .grid-container.titleContainer .title {
    padding-bottom: 60px;
    }
    .grid-container.titleContainer .title.blueTitle {
    border-bottom: 4px solid #00AEEF;
    }
    .grid-container.titleContainer .title.whiteTitle {
    border-bottom: 4px solid #ffffff;
    }
    .grid-container.titleContainer .title.right-border:before {
    right: 100%;
    width: 0px;
    }
    .grid-container.titleContainer .title.right-border:after {
    content: "";
    /* background: black; */
    position: absolute;
    top: 0;
    bottom: -4px;
    width: 9999px;
    border-bottom: 4px solid #00AEEF;
    }
    .grid-container.titleContainer .title.left-border:before {
    left: 100%;
    width: 0px;
    }
    .grid-container.titleContainer .title.left-border:after {
    content: "";
    /* background: black; */
    position: absolute;
    top: 0;
    bottom: -4px;
    width: 9999px;
    border-bottom: 4px solid #ffffff;
    }
</style>

我经常使用Bootstrap 4，并且尝试学习基础6（使用wordpress），所以我很困惑... 我如何做才能获得所附图像中显示的内容？ https://imgur.com/7Df3nLL