Col-5x Colorful Box bozuk

index.cshtml

<section class="section bg-white margin-top-40 p-0">
    @{
        int card129Col = 5;
        int card129TotalRow = 1;
        int card129CategoryOrderNumber = 2;

        if (Partial.isCategoryOrderNumber(card129CategoryOrderNumber))
        {
            IEnumerable<Post>
            card129Posts = Partial.PostsOrderNumber(card129CategoryOrderNumber, 0, card129Col * card129TotalRow, Partial.Order.OrderBy, true, lang);
            Category category129title = Partial.Category(card129CategoryOrderNumber, lang);
            int card129Count = Convert.ToInt32(Math.Ceiling(card129Posts.Count() / Convert.ToDouble(card129Col)));
            <div class="section-gradient p-5">
                <div class="container">
                    <div class="section-header center">
                        <h2 class="title">@category129title.CategoryTitle</h2>
                        <div class="border"></div>
                        <h3 class="text">@category129title.CategoryContent.HtmlEncode()</h3>
                    </div>

                    <div class="salipazari salipazari-carousel owl--reading">
                        <div class="owl-salipazari owl-carousel owl-theme owl-loaded owl-drag">

                            <div class="owl-stage-outer">
                                <div class="owl-stage">
                                    @for (int componen = 0; componen < card129Count; componen++)
                                    {
                                        foreach (Post comPost in card129Posts.Skip(componen * card129Col).Take(card129Col))
                                        {
                                            <div class="owl-item discus-float">
                                                <div class="salipazari-card item">
                                                    <a href="@Partial.PostLink(comPost.PostID)">
                                                        <div class="salipazari-cover"><img src="@comPost.PostThumbnail"></div>
                                                        <div class="salipazari-body">
                                                            @Partial.PostMeta(comPost.PostID, "icon")
                                                            <div class="title">KARAYEL<br><span>@comPost.PostTitle.HtmlEncode()</span></div>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        }
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }
    }
</section>

CSS

.section-gradient {
        z-index: 1;
        top: 0;
        right: 0;
        left: 0;
        background: -webkit-gradient(linear, left top, left bottom, from(#004277), to(transparent));
        background: linear-gradient(#004277, transparent);
        z-index: 1;
    }

    .section-header.center {
        text-align: center;
    }

    .section-header .title {
        font-size: 42px;
        font-weight: 700;
        line-height: 1.1;
        color: #fff;
    }

    .section-header.center .border {
        margin: 10px auto 0;
        display: block;
        background: #fff;
        width: 75px;
        height: 1px;
    }

    .section-header .text {
        font-size: 18px;
        margin-top: 10px;
        color: #fff;
        font-weight: 300;
    }

    .salipazari-cover {
        height: 300px;
        overflow: hidden;
    }

    .salipazari-body {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(255, 198, 0, 0.85);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        text-align: center;
        padding: 30px;
        color: #fff;
        width: 230px;
        min-height: 300px;
    }

    .salipazari .owl-item:nth-child(2) .salipazari-body {
        background: rgba(227, 89, 98, 0.85);
    }

    .salipazari .owl-item:nth-child(3) .salipazari-body {
        background: rgba(34, 126, 221, 0.85);
    }

    .salipazari .owl-item:nth-child(4) .salipazari-body {
        background: rgba(178, 229, 40, 0.85);
    }

    .salipazari .owl-item:nth-child(5) .salipazari-body {
        background: rgba(227, 89, 216, 0.85);
    }

    .salipazari-body .title {
        font-weight: 700;
        font-size: 28px;
        line-height: 1.2;
        -webkit-transition: .3s;
        transition: .3s;
        margin: 0px;
    }

    .salipazari-card a:hover .salipazari-body .title {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }

    .salipazari-card a:hover .salipazari-body i {
        -webkit-transform: translateY(60px);
        transform: translateY(60px);
    }

    .salipazari-body .icon {
        font-size: 60px;
        margin-bottom: 20px;
        -webkit-transition: .3s;
        transition: .3s;
    }

    .discus-float {
        width: 222px;
        margin-left: auto;
        margin-right: auto;
        float: left !important;
    }
    @media (max-width: 700px) {

        .discus-float {
            width: 222px;
            margin-left: auto;
            margin-right: auto;
            float: none !important;
        }
    }

http://www.salipazari.bel.tr/