页面上无法解释的空间差距

Question

我需要帮助我的网页中有一个看不见/莫名其妙的空格，在下面的屏幕截图中你可以看到空格（红色区域）：

我需要他们的行为就像下面的另一行＆＃34; LMP＆＃34;和＆＃34; LMB＆＃34;

在Safari中，空间差距不存在，但在chrome和firefox中出现这个空间，老实说，我不知道该做什么，我发现container类width:80%消除差距，但页面变得太薄了。

这是一个 JSfiddle

如果有人有同样的问题，在标题之上我有一个标题，在这个我错过了一个/ div所以下一行是完全疯了...感谢所有帮助我，我真的赞成帮助

Answer 1

您需要制作<div class="row">

在任何col-md/col-lg/col-sm之前

因为Bootstrap为此保留15px 填充。

更新jsfiddle解决方案：

在codepen Link

中更新解决方案

更新 Snipper

/***** 3.- NEWS AND CONTENT *******/
.news-section {
	background-color: #F1EFEF;
	height: 1500px;
}
.black-title {
    margin-top: 50px;
    height: 60px;
    width:112%;
    margin-left: -15px;
    background-color: #4A90E2;
    text-align: center;
    line-height: 60px;
}
.black-title > h3 {
    vertical-align: middle;
}
.white-title {
    margin-top: 50px;
    height: 60px;
    margin-left: -15px;
    background-color: #3F444A; 
    color: #fff;
    text-align: center;
    line-height: 60px;
}
.white-title > h3 {
    vertical-align: middle;
}
.title-section-2 {
	margin-top:0px;
	height: 100%;
}
.news-content {
    margin-top: 25px;
    display: block;
}
.news-content img {
	margin:auto;
	background-color: #F1EFEF;
}
.news-link {
	text-align: right;
	margin: 10px;
}
.news-link a {
	color: #E7BF3A;
	text-decoration: none;
}
.spot-horizontal {
	height: 90px;
	margin-top: 10px;
	background-color: #BD10E0;
}
.logos-horizontal {
	height: 50px;
	background-color: #3F444A;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section>
        <div class="container">
            <div class="row">
                <div class="news-section">

                   
                    <div class="col-md-6 col-sm-6">
                         <div class="row">
                            <h3 class=" black-title">Lo más nuevo</h3>
                            <div class="news-content">
                                <img class="img-responsive" src="http://placehold.it/500x400" alt="" >    
                            </div>                   
                        </div>
                    </div>
					<div class="col-md-6 col-sm-6">
						<div class="row">
                            <h3 class="white-title">Videos más nuevos</h3>
                            <div class="news-content">
                                <img class="img-responsive" src="http://placehold.it/500x400" alt="" >    
                            </div>
                        </div>
					</div>
                   
                    <div class="col-md-12 spot-horizontal">
						<div class="row">
                            <h3 class="title-black">PUBLICIDAD</h3>
                        </div>
                    </div>

                    <div class="col-md-6 col-sm-6">
						 <div class="row">
                            <h3 class=" black-title title-section-2">LMB</h3>
                            <div class="news-content">
                                <h4>Titulo de noticia</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie aliquet tristique. Proin aliquam neque quis est sagittis, tempus sagittis tortor mattis. Praesent nec gravida.</p>

                                <h4>Titulo de noticia</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie aliquet tristique. Proin aliquam neque quis est sagittis, tempus sagittis tortor mattis. Praesent nec gravida.</p>

                                <div class="news-link">
                                    <a href="#">Más Noticias</a>
                                </div>
                            </div>                   
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
						 <div class="row">
                            <h3 class="white-title title-section-2">LMP</h3>
                            <div class="news-content">
                                <h4>Titulo de noticia</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie aliquet tristique. Proin aliquam neque quis est sagittis, tempus sagittis tortor mattis. Praesent nec gravida.</p>

                                <h4>Titulo de noticia</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie aliquet tristique. Proin aliquam neque quis est sagittis, tempus sagittis tortor mattis. Praesent nec gravida.</p>

                                <div class="news-link">
                                    <a href="#">Más Noticias</a>
                                </div>
                            </div>
                        </div>
                    </div>
                   
                    <div class="col-md-12 logos-horizontal">
						<div class="row">
                            <h3 class="white-title title-section-2">LOGOS</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Answer 2

两个div必须为inline-block并且具有相同的父级。

这是一个小提琴：https://jsfiddle.net/fbrh1464/6