使用bootstrap Container类进行缩进问题

Question

.left-text {
	margin-right : 25%;
	margin-left : 5%;
}

.img-left {
	z-index : 10 ;
}

.color-overlap-right {
	background-color : #d93;
	margin-right : -25%;
}

  <div class="row">
    <div class="col-sm-6" style="background-color:lavenderblush;">
		<div class="color-overlap-right">
			<div class="left-text">
				<h1 id="heading">Top 8 reasons</h1>

			</div>
		</div>		
	</div>
    <div class="col-sm-6 img-left" style="background-color:lavender;">
		<img class="img-responsive" src="img/1.PNG" alt="1">
	</div>	
  </div>

我正在尝试制作以下HTML布局

以下是我的布局的样子。页面上的所有内容都保持对齐，如图所示。但是有一些图像和颜色框超出了容器的宽度。我面临的问题是将div内的内容与整个宽度对齐以与上面的列中的文本一起缩进。有人可以提供一些提示吗？

修改1

此答案已标记为重复。但是只想添加第1列的高度超过第2列。第2列中的图像与第1列中的颜色重叠。在您提供的解决方案中，背景颜色应用于第2列中覆盖的整个父行。在我的场景中不是不同的颜色。

修改2