使用网格进行布局，在第一张图片的左侧留有多余的空白

Question

我的第一个img的左侧带有这种布局，不需要填充。我发现的唯一另一个问题是建议将margin：0放进去，但是我已经将其放在CSS的顶部。如果相关的话，我的代码的这一特定部分就是媒体查询的一部分。（同样对于#intro片段，在我这里，它显示了其中的一些缩进彼此不同，但是它们在Dreamweaver上是缩进的，但是编辑似乎并没有将它们固定在此处，抱歉）

	#intro{
	    display:grid;
		grid-template-columns: 1fr 1fr 1fr;
	    grid-template-areas: 
		"a c b";
		grid-column-gap: 40px;
		grid-template-rows: auto;
	}

	#intro img{
		padding-bottom: 30px;
	}

	#intro img:first-of-type{
		grid-area: a;
	}

	#intro img:last-of-type {
		grid-area: b;
	}

	#intro p{
		grid-area: c;
		font-size: 25px;
		padding:30px 0px;
		line-height: 40px;
		text-align: center;
	}

<section id="intro">
		
		
		<img src="https://via.placeholder.com/150/" alt="c 1">

		<img src="https://via.placeholder.com/150/" alt="c 2">

		<p>By popular demand...</p>
	
		
	</section>

Answer 1

添加

body {
    margin: 0px;
}

body {
    margin: 0px;
}
#intro{
	    display:grid;
		grid-template-columns: 1fr 1fr 1fr;
	    grid-template-areas: 
		"a c b";
		grid-column-gap: 40px;
		grid-template-rows: auto;
	}

	#intro img{
		padding-bottom: 30px;
	}

	#intro img:first-of-type{
		grid-area: a;
	}

	#intro img:last-of-type {
		grid-area: b;
	}

	#intro p{
		grid-area: c;
		font-size: 25px;
		padding:30px 0px;
		line-height: 40px;
		text-align: center;
	}

<section id="intro">
		
		
		<img src="https://via.placeholder.com/150/" alt="c 1">

		<img src="https://via.placeholder.com/150/" alt="c 2">

		<p>By popular demand...</p>
	
		
	</section>