4x3 Card Box çok bozuk

Kategori

<section class="section-3 pb-5 discus-parallax" style="background-color: #162b60 !important;">
    @{
        int card32Col = 4;
        int card32TotalRow = 1;
        int card32CategoryOrderNumber = 14;

        if (Partial.isCategoryOrderNumber(card32CategoryOrderNumber))
        {
            IEnumerable<Category>
                card32Category = Partial.CategorySubOrderNumber(card32CategoryOrderNumber, lang);
            Category category32idno = Partial.Category(card32CategoryOrderNumber, lang);
            int card32Count = Convert.ToInt32(Math.Ceiling(card32Category.Count() / Convert.ToDouble(card32Col)));
            <div class="container-fluid">
                <div class="container">
                    <div class="text-center mt-3 text-white">
                        <h3>@category32idno.CategoryTitle.HtmlEncode()</h3>
                    </div>
                    @for (int componen = 0; componen < card32TotalRow; componen++)
                    {
                        <div class="row">
                            @foreach (Category comCategory in card32Category.Skip(componen * card32Col).Take(card32Col))
                            {
                                <div class="col-md-@(12 / card32Col)  col-12 col-xl-@(12 / card32Col)">
                                    <div class="box-2" style="background: url(@comCategory.CategoryImage);">
                                        <div class="discus-shadow">
                                            <a href="@Partial.CategoryLink(comCategory.CategoryID)">
                                                <img class="dc-card-img-top" src="@comCategory.CategoryThumbnail">
                                            </a>
                                            <h4 class="mar-t-50"><a href="@Partial.CategoryLink(comCategory.CategoryID)">@comCategory.CategoryTitle.HtmlEncode()</a></h4>
                                        </div>
                                    </div>
                                </div>
                            }
                        </div>
                    }
                </div>
            </div>
        }
    }
</section>

Makale

<section class="section-3 pb-5 discus-parallax" style="background-color: #162b60 !important;">
    @{
        int card38Col = 4;
        int card38TotalRow = 1;
        int card38CategoryOrderNumber = 2;

        if (Partial.isCategoryOrderNumber(card38CategoryOrderNumber))
        {
            IEnumerable<Post>
            card38Posts = Partial.PostsOrderNumber(card38CategoryOrderNumber, 0, card38Col * card38TotalRow, Partial.Order.OrderBy, true, lang);
            Category category38title = Partial.Category(card38CategoryOrderNumber, lang);
            int card38Count = Convert.ToInt32(Math.Ceiling(card38Posts.Count() / Convert.ToDouble(card38Col)));
            <div class="container-fluid">
                <div class="container">
                    <div class="text-center mt-3 text-white">
                        <h3>@category38title.CategoryTitle.HtmlEncode()</h3>
                    </div>
                    @for (int componen = 0; componen < card38Count; componen++)
                    {
                        <div class="row">
                            @foreach (Post comPost in card38Posts.Skip(componen * card38Col).Take(card38Col))
                            {
                                <div class="col-md-@(12 / card38Col)  col-12 col-xl-@(12 / card38Col)">
                                    <div class="box-2" style="background: url(@comPost.PostImage);">
                                        <div class="discus-shadow">
                                            <a href="@Partial.PostLink(comPost.PostID)">
                                                <img class="dc-card-img-top" src="@comPost.PostThumbnail">
                                            </a>
                                            <h4 class="mar-t-50"><a href="@Partial.PostLink(comPost.PostID)">@comPost.PostTitle.HtmlEncode()</a></h4>
                                        </div>
                                    </div>
                                </div>
                            }
                        </div>
                    }
                </div>
            </div>
        }
    }
</section>

CSS

.section-3 .box-2 h4 a {
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    margin-top: 50px;
}

.section-3 .box-2 a {
    color: #fff;
    font-size: 15px;
}

.section-3 .box-2 p {
    color: #ffffff;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-top: 35px;
    margin-bottom: 35px;
}

.section-3 .box-2 a {
    color: #fff;
    font-size: 15px;
}

.ba-lo a {
    border: 1px solid;
    padding: 8px;
}

.section-3 .box-2 a {
    color: #fff;
    font-size: 15px;
}

.section-3 .box-2:hover {
    color: #fff;
    transition: all 1s ease;
    border: 1px solid #fff;
    background-size: cover;
    background-position: center;
}

.section-3 .box-2 {
    transition: all 2s ease;
    border: 1px solid #fff;
    background-size: cover;
    background-position: center;
    height: 100%;
}

    .section-3 .box-2 .discus-shadow {
        padding: 14px 8% 16px 8%;
        height: 100%;
    }

.box-2 {
    text-align: center;
}

.mar-t-50 {
    margin-top: 50px;
}

.discus-shadow {
    background-color: #000000cc;
}

.jumbotron-fluid .discus-shadow {
    background-color: #e9ecef;
}


.mt-3, .my-3 {
    margin-top: 1rem!important;
}

body {
    font-family: 'Open Sans', sans-serif !important;
}


section{
    padding: 15px 0px;
}

.text-white {
    color: #fff!important;
}