Откуда серая линия между блоками?

Иногда появляется серая линия между 2 блоками. При увеличении и уменьшении масштаба она исчезает. При обновлении тоже. Появляется, но редко. Кто знает почему? Использую HTML и CSS, JS нету.

<div id="block1">
                    <div id="stack-pane-black">
                        <div id="intro-blocks">

                            <div id="block1-text">
                                    <h1 id="caption" class="caption-company">Chessman</h1>
                                    <h3 class="caption-company">Мы смотрим в будущее</h3>
                            </div>
                            <div id="block1-buttons">
                                <div id="chessman-work">
                                    <div class="gardient-buttons">
                                        <div class="text-circle-button">
                                            <h5 class="text-in-cell-conf">Chessman work</h5>
                                        </div>
                                    </div>
                                </div>
                                <div id="personnel-reserve">
                                    <div class="gardient-buttons">
                                        <div class="text-circle-button">
                                            <h5 class="text-in-cell-conf">Personnel reserve</h5> 
                                        </div> 
                                    </div>
                                </div>
                                <div id="selection-of-personnel">
                                    <div class="gardient-buttons">
                                        <div class="text-circle-button">
                                            <h5 class="text-in-cell-conf">Selection of personnel</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>          
                </div>

Вот css:

#block1 {
            overflow:hidden;
            display: flex;
            margin: auto;
            width: 100%;
            border-radius: 3px;
            height: calc(1100px * 0.5335);
            background-image: url("ImageGlobal2.png");
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }
            #stack-pane-black {
                display: flex;
                margin: auto;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0, 0.70); /* Old Browsers */
                background: -webkit-linear-gradient(to right,rgba(0,0,0, 0.60),transparent); /*Safari 5.1-6*/
                background: -o-linear-gradient(to right,rgba(0,0,0, 0.60),transparent); /*Opera 11.1-12*/
                background: -moz-linear-gradient(to right,rgba(0,0,0, 0.60),transparent); /*Fx 3.6-15*/
                background: linear-gradient(to right, rgba(0,0,0, 0.60), transparent); /*Standard*/
            }
                #intro-blocks {
                    display: block;
                    margin: auto;
                    width:100%;
                    height: 100%;
/*                    background-image: url("LineLeft.png");
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: cover;*/
                }
                    #block1-text {
                        margin: auto;
                        display: block;
                        width: 73.5%;
                        height: 50%;
                    }
                    #caption {padding-top: 85px;}
                            .caption-company {
                                margin: auto;
                                text-align: left;
                                font-weight: 100;
                                color: white;
                            }
                    #block1-buttons {
                        margin-left: auto;
                        margin-right: auto;
                        display: flex;
                        width:80%;
                        height: 50%;
                    }
                        .gardient-buttons {
                            display: flex;
                            margin: auto;
                            width: 100%;
                            height: 100%;
                            background: rgba(0,0,0, 0.60); /* Old Browsers */
                            background: -webkit-linear-gradient(bottom,rgba(0,0,0, 0.60),transparent); /*Safari 5.1-6*/
                            background: -o-linear-gradient(bottom,rgba(0,0,0, 0.60),transparent); /*Opera 11.1-12*/
                            background: -moz-linear-gradient(bottom,rgba(0,0,0, 0.60),transparent); /*Fx 3.6-15*/
                            background: linear-gradient(bottom, rgba(0,0,0, 0.60), transparent); /*Standard*/
                        }
                        .gardient-buttons:hover {
                            background: rgba(0,0,0, 0.80); /* Old Browsers */
                            background: -webkit-linear-gradient(bottom,rgba(0,0,0, 0.70),rgba(0,0,0, 0.08)); /*Safari 5.1-6*/
                            background: -o-linear-gradient(bottom,rgba(0,0,0, 0.70),rgba(0,0,0, 0.08)); /*Opera 11.1-12*/
                            background: -moz-linear-gradient(bottom,rgba(0,0,0, 0.70),rgba(0,0,0, 0.08)); /*Fx 3.6-15*/
                            background: linear-gradient(bottom, rgba(0,0,0, 0.70), rgba(0,0,0, 0.08)); /*Standard*/
                        }
                        .text-circle-button {
                            display: flex;
                            margin: auto;
                            width: 80%;
                            height: 80%;
                        }
                        #chessman-work {
                            overflow: hidden;
                            margin: auto;
                            height: 220px;
                            width: 220px;
                            border-radius: 3px;
                            background-image: url("button1.png");
                            background-position: center center;
                            background-repeat: no-repeat;
                            background-size: cover;
                        }
                        #personnel-reserve {
                            margin: auto;
                            height: 220px;
                            width: 220px;
                            border-radius: 3px;
                            overflow: hidden;
                            background-image: url("button2_2.png");
                            background-position: center center;
                            background-repeat: no-repeat;
                            background-size: cover;
                        }
                        #selection-of-personnel {
                            margin: auto;
                            width: 220px;
                            height: 220px;
                            border-radius: 3px;
                            overflow: hidden;
                            background-image: url("button3.png");
                            background-position: center center;
                            background-repeat: no-repeat;
                            background-size: cover;
                        }