Html 即使子元素不超过父元素宽度，它们也会转到新行

我想让我的3张牌在同一条线上。 我用每个子元素的

边距
计算每个子元素的
宽度
，结果是容器元素的确切
宽度
大小。
那么为什么一条线上没有3张牌呢？
问题出在哪里？我怎样才能使3个元素与容器和元素的精确大小保持一致


*{
保证金：0；
填充：0；
框大小：边框框；
列表样式：无；
}
.集装箱{
最大宽度：1230px；
宽度：100%；
保证金：0自动；
身高：100%；
}
.卡片包装{
背景：橙色；
}
.卡片{
背景：蓝色；
宽度：100%；
显示器：flex；
柔性包装：包装；
证明内容：开始；
}
.卡片{
身高：225px；
宽度：370px；
边框：1px纯红；
利润率：29像素30像素；
}

布拉

布拉

布拉

布拉

布拉

布拉

你的数学错了。你需要将每行的左/右边距计算六次，这将使你的30px下降到20px，然后计算它们变成19px的边界

1230 - 370(3) = 120 // total remaining space
120 / 6 = 20 // left and right margin size


.container{
最大宽度：1230px；
宽度：100%；
保证金：0自动；
身高：100%；
}
.卡片包装{
背景：橙色；
}
.卡片{
背景：蓝色；
宽度：100%；
显示器：flex；
柔性包装：包装；
证明内容：开始；
}
.卡片{
身高：225px；
宽度：370px；
边框：1px纯红；
利润率：29px 19px；
}

布拉

布拉

布拉

布拉

布拉

布拉

两件事：

1.）添加
框尺寸：边框框到所有内容（使用
*
选择器）以在宽度中包括边框

2.）为相邻项目添加了左侧/右侧边距，因此仅为最后/第三个项目设置30px
右侧边距
，如下所示：


*{
框大小：边框框；
}
.集装箱{
最大宽度：1230px；
宽度：100%；
保证金：0自动；
身高：100%；
}
.卡片包装{
背景：橙色；
}
.卡片{
背景：蓝色；
宽度：100%；
显示器：flex；
柔性包装：包装；
证明内容：开始；
}
.卡片{
身高：225px；
宽度：370px；
边框：1px纯红；
利润率：29像素30像素；
右边距：0；
}
.卡片：第n种类型（3n）{
右边距：30px；
}

布拉

布拉

布拉

布拉

布拉

布拉

问题在于class.card中的边距，因为边距被添加到div之间的空格中。
我将边距更改为0，您可以使用填充在边框卡和内容卡之间创建一个空格


*{
保证金：0；
填充：0；
框大小：边框框；
列表样式：无；
}
.集装箱{
最大宽度：1230px；
宽度：100%；
保证金：0自动；
身高：100%；
}
.卡片包装{
背景：橙色；
}
.卡片{
背景：蓝色；
宽度：100%；
显示器：flex；
柔性包装：包装；
证明内容：开始；
}
.卡片{
身高：225px；
宽度：370px；
边框：1px纯红；
边距：0px 0px；//边距0
}

布拉

布拉

布拉

布拉

布拉

布拉

检查：总数不匹配：框大小为1290，框大小为1296，我忘了加上*{margin:0；padding:0；框大小：border-box；列表样式：none；}Thanx。它很有魅力。