css - 具有齐平边缘的HTML/CSS全宽4列布局

我试图使用以下代码在纯HTML / CSS（基本上不使用引导程序）的网站上实现全宽4列布局：

HTML：

<div class="row-fourcol">
  <div class="column-fourcol">
    <div class="stockitembox">
      <img src="../resources/graphics/images/product_hexagonal.png" title="Search our hexagonal steel stock range ..." alt="Hexagonal steel bar" onclick="hexagonalFunction()">
      <p>HEXAGONAL</p>
    </div>
  </div>
  <div class="column-fourcol">
    <div class="stockitembox">
      <img src="../resources/graphics/images/product_round.png" title="Search our round steel stock range ..." alt="Round steel bar" onclick="roundFunction()">
      <p>ROUND</p>
    </div>
  </div>
  <div class="column-fourcol">
    <div class="stockitembox">
      <img src="../resources/graphics/images/product_rectangular.png" title="Search our rectangular steel stock range ..." alt="Rectangular steel bar" onclick="rectangularFunction()">
      <p>RECTANGULAR</p>
    </div>
  </div>
  <div class="column-fourcol">
    <div class="stockitembox">
      <img src="../resources/graphics/images/product_square.png" title="Search our square steel stock range ..." alt="Square steel bar" onclick="squareFunction()">
      <p>SQUARE</p>
    </div>
  </div>
</div>

CSS：

.column-fourcol {
  float: left;
  width:24.3%;
  padding: 10px 10px 10px 0px;
}

.row-fourcol::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 1903px) {
  .column-fourcol {
    width: 45%;
    float: left;
  }
}

但是，我的问题是，在添加间距（使用填充）时，我必须在右侧添加填充，这意味着我的列在左侧齐平，而在右侧却不齐平，因为它们没有填满整个空间或由于右侧填充，它会下降到下一行。我已经在下图中显示了这一点，左手边与左边框齐平，但是右手边不能齐平，因为填充会阻止它。

我怎样才能做一个四列布局，其中列是隔开的，但齐平到容器的左右两侧？我已经搜索了与自己的问题类似的问题（例如：CSS Full-Width Grid - Columns with Even Margins），但是，此示例似乎与我期望的间隔列效果不匹配（或者我只是不理解答案）。

Example of four column padding
（红线用于说明容器的侧面。）

感谢您的协助，我们将不胜感激。

最佳答案

Flexbox是最佳解决方案。但是您可以尝试如下操作：

.column-fourcol {
  float: left;
  width:25%;

}
.stockitembox{
  padding: 10px 5px;
}

.row-fourcol::after {
  content: "";
  display: table;
  clear: both;
}

img{
  max-width:100%;
}

@media (min-width: 1903px) {
  .column-fourcol {
    width: 45%;
    float: left;
  }
}

您可以在以下链接中看到结果：
https://jsfiddle.net/n59us5oz/7/

更新

您可以删除左右间距，为行添加负边距：
https://jsfiddle.net/n59us5oz/8/