Html 如何为网格容器设置页面的特定宽度？

我正在尝试制作一个布局，一行有4列，宽度不同，但也应该只占页面的70-80%。但是，一旦我设置了父容器的宽度或为容器添加了边距，网格行中的内容就会开始与其他列重叠，如何防止这种情况发生

<style>

    .instructions-wrapper {
        text-align: center;
        margin: 0 5%; /*if I delete this row, it all works as expected. I tried width: 80%, same things happens.*/
    }

    .one {
        background-color: red;
    }

    .two {
        background-color: yellow;
    }
    
    .three {
        background-color: blue;
    }

    .four {
        background-color: purple;
    }


</style>

<div class="instructions-wrapper">
    <h1>text</h1>
    <div class="container">
        <div class="row">
            <div class="col-lg-1 one">
                2019
            </div> 
            <div class="col-lg-2 two">
                <img src="https://via.placeholder.com/100"> 
            </div>
            <div class="col-lg-7 three">
                text
            </div>
            <div class="col-lg-2 four">
                text
            </div>
        </div>
    </div>
</div>

.说明书{
文本对齐：居中；
边距：0.5%；/*如果我删除这一行，它会按预期工作。我尝试了宽度：80%，同样的情况也会发生*/
}
.一{
背景色：红色；
}
.二{
背景颜色：黄色；
}
.三{
背景颜色：蓝色；
}
.4{
背景颜色：紫色；
}
文本
2019
文本
文本

边距使容器变小，使列对于内容来说太小，因此必须重叠

例如，你给列“两个”2部分的网格，你的图像是100px

• 如果您的容器是1200px。然后2个零件是200px，包括30 px的填充物
• 如果容器的宽度为780px，则2个部分的宽度为130px-这是图像和填充的全宽
• 因此，如果容器小于780px，则该网格单元将开始重叠。

这是您使用宽度为80%的代码，当您在整页中查看它时，它仍然有效。所以你的容器太小了

。说明包装器{
文本对齐：居中；
宽度：80%；
}
.一{
背景色：红色；
}
.二{
背景颜色：黄色；
}
.三{
背景颜色：蓝色；
}
.4{
背景颜色：紫色；
}

文本
2019
文本
文本

那么，您可以帮助解决这个问题吗？@syntanic唯一的问题是您的内容太大，所以请将您的内容缩小或放入足够大的网格单元格中。我的答案解释了发生了什么，这样你就可以使用这些信息来修复它。@syntanic如果我的答案向你解释了问题以及你必须做什么来修复它，你可能会接受它或投票：）它可能不是你想知道的，但它是答案，你不能将较大的内容放入较小的空间，所以你必须改变：）