如果你使用box-sizing: border-box，这将解决你的问题：原因是，当你有padding: 20px; width: 100%，它实际上增加了40 px到已经100%的宽度，除非你显式地设置这个box-sizing属性。

* {
  box-sizing: border-box;
}

这将解决您的布局问题：see proof-of-concept fix of your fiddle。这也是为什么建议使用CSS重置。
p/s：考虑使用CSS网格布局，它更容易推理。

将* {box-sizing: border-box;}添加到代码中。
更多关于Box sizing https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

你眼前的问题已经解决了-正如其他人建议的那样，你可以设置盒子大小，这样填充就包括在尺寸中了。
但是，由于使用了Flex，HTML非常复杂。你想要的布局看起来更像一个网格-网格适合2D类型的布局。
这个片段简化了你的HTML -每个元素都在同一个“级别”，需要删除单独的部分。
grid-template-areas CSS属性用于布局内容。

* {
  box-sizing: border-box;
}

body {
  background-color: #D3D3D3;
}

#container {
  display: grid;
  grid-template-columns: 1fr 9fr;
  grid-template-areas: 'H H' 'C1 C3' 'C2 C3' 'F F';
  width: 100%;
  gap: 10px;
  padding: 20px;
}

.show {
  padding: 20px;
  border: 2px black solid;
  width: 100%;
}

.header {
  grid-area: H;
}

.content1 {
  grid-area: C1;
}

.content2 {
  grid-area: C2;
}

.content3 {
  grid-area: C3;
}

.footer {
  grid-area: F;
}

<div id="container">
  <div class="header show"> header </div>
  <div class="content1 show"> content 1</div>
  <div class="content2 show"> content 2</div>
  <div class="content3 show"> content 3</div>
  <div class="footer show"> footer</div>
</div>

只需为content-1和content-2设置宽度，然后为content-3执行相同的操作：

content-1 {
  width:30vw;
  margin-right:5vw;
}
content-2 {
  width:30vw;
  margin-right:5vw;
}
content-3 {
  width:60vw;
  margin-left:5vw;

我还增加了10大众之间的利润率，所以它看起来更整洁，随时自定义利润率和东西自己！希望这有帮助