所以我正在尝试制作一个响应式表格，但由于某种原因，当我将单元格堆叠为 1x3 时，整个表格的左侧都有随机空间。我似乎想不通为什么...
https://codepen.io/asyi/pen/ybjOJa
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<title>DateNight Table 1 x 3</title>
<link href="https://fonts.googleapis.com/css?family=Clicker+Script|Raleway" rel="stylesheet">
</head>
<body>
<div class="info-table">
<div id="table-1" class="table-display">
<img src="images/search_transparent.png" alt="">
<h1 class="blue-title"> Best Babysitters in Town </h1>
<p class="blue-text"> We are serious about having only amazing babysitters on our
roster. They've all been Skype interviewed by a parent, have 1-2
years of experience and can provide 2 childcare-related references.
Our parent approval rate is through the roof. University and
College students, long-time babysitters, ECE students. Only the best.
</p>
</div>
<div id="table-2" class="table-display">
<img src="images/search_transparent.png" alt="">
<h1 class="white-title"> This is Easy </h1>
<p class="white-text"> We're parents, too. We know how short on time you are.
DateNight gives parents a small pool of great candidates from which
to select a babysitter. Don't pay a small fortune to access a huge
list of mediocre resumes. Join DateNight and have 3 interviews
in 10 minutes. Odds are - you'll love all 3 candidates.
</p>
</div>
<div id="table-3" class="table-display">
<img src="images/search_transparent.png" alt="">
<h1 class="blue-title">Safer for Everyone</h1>
<p class="blue-text"> Parents want to decide who is babysitting for their kids.
With us, you'll have all the necessary elements they need to make
an informed decision on childcare - an interview, reference info and
relevant babysitter experience. Babysitters are people's kids, too.
Ws protect babyistter safety by not revealing their full identity
online until they have agreed to meet a family. Everyone deserves to be safe.
</p>
</div>
</div>
</body>
</html>
.info-table {
margin-top: 10px;
display: table;
width: 100%;
margin-top: 100px;
text-align: center;
overflow: hidden;
font-family: 'Raleway', helvetica, sans-serif;
}
.table-display {
display: table-cell;
height: 300px;
padding: 1em;
width: 33.3%;
}
img {
width: 6em;
height: 6em;
}
#table-2 {
background-color: #000039;
}
h1 {
text-align: center;
}
p {
text-align: justify;
}
.white-title, .white-text {
color: #ffffff;
}
.blue-title, .blue-text {
color: #000039;
}
@media (max-width: 767px) {
.table-display {
display: table;
width: 100%;
}
.info-table {
display: table-cell;
width: 100%;
padding: 3em;
}
p {
text-align: justify;
vertical-align: middle;
}
}
您有一个具有水平填充和width: 100%的元素.table-display，它使用标准的"内容框"框模型，以便将宽度推到 100% + 填充，并且额外的宽度推到右侧。
向该元素添加box-sizing: border-box以包含指定宽度内的填充。您可以在任何地方添加它。就个人而言，我使用 *, *:after, *:before { box-sizing: border-box; } ，但您也可以将其添加到指定 width: 100% 的媒体查询中。
@media (max-width: 767px) {
.table-display {
display: table;
width: 100%;
box-sizing: border-box;
}
}