我使用媒体查询，当我在平板电脑视图中时，我有三个部分：2个部分有50%的宽度，3个部分有100%的宽度。问题是，我希望下面的部分与其他部分对齐。我不明白他们为什么不结盟。
/********** Base styles **********/
*
{
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
body
{
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
h1
{
font-weight: 800;
font-size: 3em;
text-align: center;
padding: 30px;
margin-bottom: 30px;
}
.row
{
width: 100%;
position: relative;
}
section
{
position: relative;
background-color: #ECECE0;
width: 95%;
margin:10px auto 20px auto;
left:0;
}
h2
{
position: absolute;
top:0;
right: 0;
border: 1px solid black;
font-weight: 600;
text-align: center;
padding:3px 30px;
font-size: 1.5em;
width: 150px;
}
p
{
border: 1px solid black;
padding: 45px 15px 10px 15px;
height: 180px;
overflow: hidden;
font-weight: 400;
}
#chickenP h2
{
background-color:#FFBB00;
}
#beefP h2
{
background-color:#880000;
color:#fff;
}
#sushiP h2
{
background-color:#339933;
color:#fff;
}
/********** desktop only **********/
@media (min-width: 992px) {
.col-lg-4
{
width: 33.33%;
float: left;
}
}
/********** tablet only **********/
@media (min-width: 768px) and (max-width: 991px) {
.col-md-6, .col-md-12
{
float:left;
}
.col-md-6
{
width: 50%;
}
.col-md-12
{
width: 100%;
}
}
/********** mobile only **********/
@media (max-width: 767px) {
.col-sm-12
{
float: left;
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sivan Giora module2-solution</title>
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<h1>Our Menu</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<section id="chickenP">
<h2>Chicken</h2>
<p>Lorem ipsum dolor sit amet, luctus nesciunt, hendrerit vitae labore in sagittis, urna lectus urna dolor suspendisse lectus. Non porttitor odio purus libero wisi. Sociis erat sed fermentum fermentum duis, lorem in, augue justo mauris proin risus eros tempus, eligendi et consequat tristique voluptas ac velit. </p>
</section>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<section id="beefP">
<h2>Beef</h2>
<p>Dolor ornare nibh dolor, maecenas massa, justo donec nisi, in pede phasellus et eget magna felis. Mauris donec ut dui libero elit, sit proin convallis sodales vulputate lorem tellus, feugiat cursus ipsum. Ipsum enim nulla, ante libero ullamcorper in volutpat risus bibendum, aliquam suscipit ante, vestibulum sit mauris fusce vitae purus vulputate, wisi facilisi. </p>
</section>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<section id="sushiP">
<h2>Sushi</h2>
<p>Vel elementum aliquet, sapien per ratione, gravida nisl pede ipsum. Justo praesent a ligula neque ipsum, commodi suscipit, nunc mauris mauris elementum quam. At proin lacinia urna diam aliquam amet, cras nonummy ultrices et, felis et molestie, posuere habitasse wisi.</p>
</section>
</div>
</div>
</div>
</body>
</html>在css文件中，您必须在节中使用空格，而不是宽度
因为您为div宽度定义了：X%；很抱歉我解释得不好，这是真的。
section{
position: relative;
background-color: #ECECE0;
margin:10px 20px;
left:0;}
你的部分有95%的宽度（col-md-6和col-md-12），当它们都相等时，这个百分比是相同的，但当寿司在自己的一行时，数字就不会再加起来了。添加
section {
margin: 5px;
width: auto;
}
在您的媒体查询中将修复此问题。请记住，您确实需要边距，因为您以前的css在auto中有左右边距，您不能再使用了。
谢谢你的回答，它解决了我的问题，但最终我成功了从节选择器中删除宽度，并为作为节父级的div选择器提供填充。
.row > div
{
padding: 15px;
}
section
{
position: relative;
background-color: #ECECE0;
margin:10px auto 20px auto;
left:0;
}