С чем могут быть связаны линий между блоками div?

Question

[Lord Drous]

Всем привет, у меня есть 4 блока(код ниже приведен), когда ставлю разрешение 6 айфона и выше, ну и не только айфона, то у меня появляются какие-то линий. которых нет в десктопной версий,

html:

<div class="white-section row">
    <div class="imac col-sm-6">
        <img class="imac-screen img-responsive wow zoomInUp" src="images/research/research1.png">
    </div>
    <!--imac-->

    <div class="col-sm-6">

        <div class="white-section-text">

            <h2 class="imac-section-header light">SIMPLE AND BEAUTIFUL</h2>

            <div class="imac-section-desc">

            <span>  Use Nova theme for your next web project.
                It is completely customizable so you can change any of the sections to fit your needs.
                Nova Theme is Free for any kind of use, personal and commercial. Have fun and good luck!</span>
            </div>
        </div>
    </div>
</div>
<div class="white-section row">
    <div class="col-sm-6">

        <div class="white-section-text">

            <h2 class="imac-section-header light">SIMPLE AND BEAUTIFUL</h2>

            <div class="imac-section-desc">

            <span>  Use Nova theme for your next web project.
                It is completely customizable so you can change any of the sections to fit your needs.
                Nova Theme is Free for any kind of use, personal and commercial. Have fun and good luck!</span>
            </div>
        </div>
    </div>

    <div class="imac col-sm-6">
        <img class="imac-screen img-responsive wow zoomInUp" src="images/research/research1.png">
    </div>
</div>
<div class="white-section row">
    <div class="imac col-sm-6">
        <img class="imac-screen img-responsive wow zoomInUp" src="images/research/research1.png">
    </div>
    <!--imac-->

    <div class="col-sm-6">

        <div class="white-section-text">

            <h2 class="imac-section-header light">SIMPLE AND BEAUTIFUL</h2>

            <div class="imac-section-desc">

            <span>  Use Nova theme for your next web project.
                It is completely customizable so you can change any of the sections to fit your needs.
                Nova Theme is Free for any kind of use, personal and commercial. Have fun and good luck!</span>
            </div>
        </div>
    </div>
</div>
<div class="white-section row">
    <div class="col-sm-6">

        <div class="white-section-text">

            <h2 class="imac-section-header light">SIMPLE AND BEAUTIFUL</h2>

            <div class="imac-section-desc">

            <span>  Use Nova theme for your next web project.
                It is completely customizable so you can change any of the sections to fit your needs.
                Nova Theme is Free for any kind of use, personal and commercial. Have fun and good luck!</span>
            </div>
        </div>
    </div>

    <div class="imac col-sm-6">
        <img class="imac-screen img-responsive wow zoomInUp" src="images/research/research1.png">
    </div>
</div>

css:

.white-section {
	background-color: #BBDEFB;
    width: 100%;
    margin: auto;
    overflow: hidden;
    padding-top: 20px;
    padding-bottom: 15px;
}

.white-section-text {
    text-align: center;
}
.imac-section-header {
	padding-top: 22px;
}

.imac-section-desc {
    text-align: center;
    font-weight: 300;
    font-size: 24px;
    line-height: 40px;
    max-width: 400px;
    margin: auto;
    padding-bottom: 40px;
}


.imac-screen {
	margin-top: 35px;
    border-radius: 10px;
	box-shadow:
   0 3px 6px rgba(0, 0, 0, .3),
   -23px 0 20px -23px rgba(0, 0, 0, .8),
   23px 0 20px -23px rgba(0, 0, 0, .8),
   0 0 40px rgba(0, 0, 0, .1) inset;
}

Заранее спасибо!

Comments

[Данил Разумков]

Можно скриншет или еще что то. Просто я посмотрел https://jsfiddle.net/m3feqsev/5/
Никаких линий нет.

[Lord Drous]

они появляются. когда я нажимаю посмотреть код элемента

Answer 1

[I'm Yoda]

Глянул, действительно есть линии! С чем это связанно сказать не могу, margin-top и margin-bottom равны 0. Самое простое решение это обернуть вашу верстку в еще один div и присвоить background-color: #BBDEFB;

Answer 2

[Данил Разумков]

Я так подозреваю, что это bootstrap их создает. Либо сделайте без его использования, либо в css через media запрос убегайте все бордеры у блока.