Html CSS div未放置在父级的右侧

正如标题所说，我想把一个div放在另一个div的右边。但是当把它放在右边时，它完全忽略了它的父级

.cart{
/*到购物车中项目的距离和结帐按钮*/
垫面：1毫米；
左：1rem；
右侧填充：1rem；
/*限制大小*/
宽度：适合的内容；
高度：适合的内容；
/*居中*/
保证金：0自动；
/*到页面底部的距离*/
边缘底部：2rem；
/*调试*/
背景颜色：黄色；
位置：相对位置；
}
.购物车价格{
/*使按钮缩小到其中心*/
文本对齐：居中；
宽度：适合的内容；
自我证明：柔性端；
}
/*显示总价*/
.购物车价格汇总表{
/*TODO样式文本*/
}
.购物车结帐按钮{
/*风格*/
背景色：#2B2E32；
颜色：#FFFFFF；
高度：2.5em；
右侧填充：1em；
左：1米；
字体系列：“Palatino常规”；
字号：1em；
/*删除白色边框*/
边界：0px；
宽度：100%；
页边顶部：1rem；
}

总额：194.50欧元

结账

首先，您必须删除

justify self:flex end，因为您没有使用flexbox，
第二件事是用另一个div标签包装卡片，这个div将占据100%的宽度，
现在您可以添加
flaot:right到。购物车价格

html文件：

<div>
        <div class="cart-price">
            <b class="cart-price-summary">Total: € 194.50</b><br>
            <button class="cart-checkout-button">Checkout</button>
        </div>
</div>

所以我就把它修好了。
我重写了整个程序，使用flexbox并添加了
justify content:right至
.cart
现在，CART被固定在页面的中间，但是内容在右边。这对于.cart部分中的其他所有内容都没有问题，但按钮现在位于右侧。

.cart{
/*到购物车中项目的距离和结帐按钮*/
垫面：1毫米；
左：1rem；
右侧填充：1rem；
/*限制大小*/
宽度：适合的内容；
高度：适合的内容；
/*居中*/
保证金：0自动；
/*到页面底部的距离*/
边缘底部：2rem；
/*调试*/
背景颜色：黄色；
位置：相对位置；
}
.购物车价格{
显示器：flex；
弯曲方向：立柱；
对齐项目：柔性端；
}
/*显示总价*/
.购物车价格汇总表{
/*TODO样式文本*/
}
.购物车结帐按钮{
/*风格*/
背景色：#2B2E32；
颜色：#FFFFFF；
高度：2.5em；
右侧填充：1em；
左：1米；
字体系列：“Palatino常规”；
字号：1em；
/*删除白色边框*/
边界：0px；
页边顶部：1rem；
}

总额：194.50欧元

结账
我确实这么做了，但不幸的是它也这么做了：/I这就是我所做的，购物车的价格在右边，检查您是否添加了包装器，您可以添加更多的HTML代码，让我们更好地了解您的bug
.cart-price {
    /*make button decrease size into its center*/
    text-align: center;
    width: fit-content;
    /* justify-self: flex-end; */
    float: right;
  }