Html 当我添加填充时，div在容器外

当我添加填充物时，我的右侧按钮被推到容器外面。我该如何解决这个问题？ 请注意，我也使用引导，请检查代码笔

---

您没有使用正确的类，但使用此代码这是bootstarp类的正确用法

@导入url（'https://fonts.googleapis.com/css?family=Work+Sans:300400&display=swap'）；
* {
保证金：0；
填充：0；
框大小：边框框；
溢出x：隐藏；
}
身体{
字体系列：“无衬线工作”，无衬线；
背景色：rgb（197163163）；
}
/*****************************
导航栏
*****************************/
.导航左文本{
颜色：白色；
文本转换：大写；
字号：1.563em；
字母间距：3px；
}
.注册btn{
颜色：白色；
文本转换：大写；
字体大小：300；
字号：0.813em；
字母间距：2px；
边框：纯白1px；
填充：12px 20px；
}

西区

为什么不使用

col-sm-6

而不是

col

？

<div class="head">
    <nav class="container-fluid test-one">
        <div class="row parent">
            <div class="col logo"> 
                <span class="nav-left-text">west end</span>
            </div>

            <div class="col logo"> 
                <a href="" class="register-btn">register</a>
            </div>
        </div>
</div>

    padding: 10px;
    margin-top: 10px;
}

.nav-left-text {
    color: white;
    text-transform: uppercase;
    font-size: 1.563em;
    letter-spacing: 3px;
}

.logo {
    text-align: center;
}

.register-btn {
    color: white;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 0.813em;
    letter-spacing: 2px;
    border: solid white 1px;
    padding: 12px 20px;
}