Bootstrap <div>границы кривые

Question

Я создал форму на странице cs html, в которой есть заполненное поле, а затем экспортирую ее в PDF. Я стилизовал строки и столбцы Bootstrap с рамкой, чтобы она выглядела как форма, которую мы моделируем. Я заметил, что некоторые границы не совпадают и кажутся кривыми.

У меня есть несколько css классов на странице для обработки различных границ, которые я включаю или выключаю, чтобы границы не удваивались, создавая более толстую линию

<style>
        .gridCellBorder{
            border-top-width: thin;
            border-left-width: thin;
            border-top-style:solid;
            border-left-style:solid;
        }
        .gridCellBorderLeftOnly {
            border-left-width: thin;
            border-left-style: solid;
        }
        .gridCellBorderRight {
            border-top-width: thin;
            border-left-width: thin;
            border-right-width: thin;
            border-top-style: solid;
            border-left-style: solid;
            border-right-style: solid;
        }
        .gridCellBorderLeftRightOnly {
            border-left-width: thin;
            border-right-width: thin;
            border-left-style: solid;
            border-right-style: solid;
        }
        .gridCellBorderRightOnly {
            border-top-width: thin;
            border-right-width: thin;
            border-top-style: solid;
            border-right-style: solid;
        }
    </style>

Вот пример кода моих строк и столбцов

<div class="row">
            <div class="col-md-9 gridCellBorder">
                <h3 style="font-weight:bold; text-align:center;">RECORD OF WEIGHTED GUIDELINES APPLICATION</h3>
            </div>
            <div class="col-md-3 gridCellBorderRight"></div>
        </div>

        <div class="row">
            <div class="col-md-2 gridCellBorder">1. REPORT NO.</div>
            <div class="col-md-6 gridCellBorder">2. BASIC PROCUREMENT INSTRUMENT IDENTIFICATION NO.</div>
            <div class="col-md-2 gridCellBorder">3. SPIIN</div>
            <div class="col-md-2 gridCellBorderRight">4. DATE OF ACTION</div>
        </div>

        <div class="row">
            <div class="col-md-2 gridCellBorder">
                @Html.EJS().InPlaceEditor("textReportNo").Mode(Syncfusion.EJ2.InPlaceEditor.RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).ShowButtons(false).SubmitOnEnter().Render()
            </div>
            <div class="col-md-6 gridCellBorder">
                <div class="row">
                    <div class="col-md-3 gridCellBorder" style="font-size:small;">a. PURCHASING OFFICE</div>
                    <div class="col-md-3 gridCellBorder" style="font-size:small;">b. FY</div>
                    <div class="col-md-3 gridCellBorder" style="font-size:small;">c. TYPE PROC INST CODE</div>
                    <div class="col-md-3 gridCellBorderRight" style="font-size:small;">d. PRISN</div>
                </div>
                <div class="row">
                    <div class="col-md-3 gridCellBorderLeftOnly">
                        @Html.EJS().InPlaceEditor("textPurchasingOffice").Mode(Syncfusion.EJ2.InPlaceEditor.RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).ShowButtons(false).SubmitOnEnter().Render()
                    </div>
                    <div class="col-md-3 gridCellBorderLeftOnly">
                        @Html.EJS().InPlaceEditor("textFY").Mode(Syncfusion.EJ2.InPlaceEditor.RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).ShowButtons(false).SubmitOnEnter().Render()
                    </div>
                    <div class="col-md-3 gridCellBorderLeftOnly">
                        @Html.EJS().InPlaceEditor("textTypeProcInstCode").Mode(Syncfusion.EJ2.InPlaceEditor.RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).ShowButtons(false).SubmitOnEnter().Render()
                    </div>
                    <div class="col-md-3 gridCellBorderLeftOnly">
                        @Html.EJS().InPlaceEditor("textPrisn").Mode(Syncfusion.EJ2.InPlaceEditor.RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).ShowButtons(false).SubmitOnEnter().Render()
                    </div>
                </div>
            </div>
            <div class="col-md-2 gridCellBorder">
                @Html.EJS().InPlaceEditor("textSpiin").Mode(Syncfusion.EJ2.InPlaceEditor.RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).ShowButtons(false).SubmitOnEnter().Render()
            </div>
            <div class="col-md-2 gridCellBorderRight">
                @Html.EJS().InPlaceEditor("dateOfAction").Mode(Syncfusion.EJ2.InPlaceEditor.RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Date).ShowButtons(false).SubmitOnEnter().Render()
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 gridCellBorder">5. CONTRACTING OFFICE CODE</div>
            <div class="col-md-1 gridCellBorder"></div>
            <div class="col-md-3 gridCellBorder"></div>
            <div class="col-md-2 gridCellBorderRight"></div>
        </div>
        <div class="row">
            <div class="col-md-6 gridCellBorderLeftOnly">
                @Html.EJS().InPlaceEditor("textContractOfficeCode").Mode(Syncfusion.EJ2.InPlaceEditor.RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).ShowButtons(false).SubmitOnEnter().Render()
            </div>
            <div class="col-md-1 gridCellBorderLeftOnly">ITEM</div>
            <div class="col-md-3 gridCellBorderLeftOnly">COST CATEGORY</div>
            <div class="col-md-2 gridCellBorderLeftRightOnly">OBJECTIVE</div>
        </div>

Я думал, что дизайн будет гибким для переменных строк и столбцов с использованием Bootstrap, но мне интересно, что стили будут быть проще и чище, используя таблицы.

Спасибо за любую помощь