How can I use media print css to make a page print correctly?

I have the this details page that my client wants to be able to print:

Details page

details page

However, when I try to print the page it gets a bit mangled:

Details page printing

printing page

I have used a bit of media print css to try to remedy some of the issues to a good degree of success, although I'm not sure you would consider this best practice at all:

DetailsStyle.css

.topLabel {
    margin-top: 50px;
}

.borderline {
    border-bottom: 4px solid #000000;
    padding-bottom: 10px;
    margin-bottom: 40px
}

.box-shadow {
    margin-top: 40px;
    box-shadow: 0.15rem 0.15rem 0.25rem #000000;
}

@media print {
    .bigContainer {
        margin-top: -100px !important;
    }

    .printButton {
        margin-right: 600px !important;
        margin-bottom: -30px !important;
    }

    .district {
        margin-top: -25px !important;
    }

    .sign {
        margin-bottom: 100px !important;
    }

    .localName {
        margin-top: -5px !important;
    }

    .suppMethodDuplicate {
        margin-right: 500px !important;
    }
}

I used the important tag because the changes weren't working in Google Chrome but that is the primary browser that everyone uses at work and the browser my client(s) will most likely be using.

However, you can see that the rows in the middle of the page are being quite mangled still and I'm not sure what to do about them. I've tried shifting them to the left and right but it never seems to get them very close to the original page.

My questions are:

1.) How could I fix those rows in the middle to print the same way they look on the normal page?

2.) Is my media print css ok or is this bad practice and if so what should I do instead?

This is the full cshtml page if you need it:

Details.cshtml

@model Roadway_History.Models.ViewModel

<!--            CUSTOM CSS          -->
<link href="~/Styles/Statewides/DetailsStyle.css" type="text/css" rel="stylesheet">

<!--            GOOGLE ICONS          -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

@{
    ViewBag.Title = "Details";
}

<div class="bigContainer">
    <div class="container-fluid text-center topLabel">
        <div class="borderline">
            <h4 class="title"><strong>DETAIL RECORD - RP ROADWAY HISTORY FILE</strong></h4>
            <div class="row">
                <div class="col-md-1 printButton">
                    <input class="text-left" type="button" onclick="javascript:window.print()" value="Print" runat="server" />
                </div>
                <div class="col-md-11">
                    <p class="text-right">
                        <u>Current Date:</u>
                        <script>document.write(new Date().toLocaleDateString());</script>
                    </p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-9 text-left">
                <h5><strong>COUNTY:</strong> <span class="box-shadow px-3">@Html.DisplayFor(model => model.Statewide.COUNTY)</span></h5>
            </div>
            <div class="col-md-3 text-right district">
                <h5><strong>District:</strong>@Html.DisplayFor(model => model.Statewide.District)</h5>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 text-left">
                <h5><strong>Route No:</strong><span class="box-shadow px-4">@Html.DisplayFor(model => model.Statewide.RouteNo)</span></h5>
            </div>
            <div class="col-md-4">
                <h5><strong>Sign System:</strong><span class="box-shadow px-4 sign">@Html.DisplayFor(model => model.Statewide.SignSys)</span></h5>
            </div>
            <div class="col-md-4"></div>
        </div>
        <div class="row">
            <div class="col-md-12 text-left">
                <h5><strong>LocalName:</strong></h5>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 text-left">
                <h5 class="box-shadow px-3 localName">@Html.DisplayFor(model => model.Statewide.LocalName)</h5>
            </div>
            <div class="col-md-8"></div>
        </div>
        <div class="row suppMethodDuplicate">
            <div class="col-md-2 text-right">
                <h5><strong>Supp Des:</strong></h5>
            </div>
            <div class="col-md-2 text-left">
                <h5>@Html.DisplayFor(model => model.Statewide.SuppDes)</h5>
            </div>
            <div class="col-md-2 text-right">
                <h5><strong>Method:</strong></h5>
            </div>
            <div class="col-md-2 text-left">
                <h5>@Html.DisplayFor(model => model.Statewide.Method)</h5>
            </div>
            <div class="col-md-1"></div>
            <div class="col-md-2 text-left">
                @Html.DisplayFor(model => model.Statewide.Duplicate_OK)
                <label class="form-check-label" for="duplicateCheck"><strong>Duplicate OK</strong></label>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2 text-right">
                <h5><strong>Date:</strong></h5>
            </div>
            <div class="col-md-2 text-left">
                <h5>@Html.DisplayFor(model => model.Statewide.ReservedDate)</h5>
            </div>
            <div class="col-md-2 text-right">
                <h5><strong>Original Location:</strong></h5>
            </div>
            <div class="col-md-2 text-left">
                <h5>@Html.DisplayFor(model => model.Statewide.OriginalL)</h5>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-2 text-right">
                <h5><strong>Original D:</strong></h5>
            </div>
            <div class="col-md-6 text-left">
                <h6>@Html.DisplayFor(model => model.Statewide.OriginalD)</h6>
            </div>
        </div>
        <div class="borderline text-left">
            <h5 class="mb-0"><strong>DOCUMENTS</strong></h5>
        </div>
        <table class="table">
            <tr>
                <th>Doc Type</th>
                <th>Order Date</th>
                <th>Doc Location</th>
                <th>File Contents</th>
                <th>Comment</th>
            </tr>

            @foreach (var document in Model.Document)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(model => document.Doc_Type)
                    </td>
                    <td>
                        @Html.DisplayFor(model => document.Order_Date)
                    </td>
                    <td>
                        @Html.DisplayFor(model => document.Doc_Location)
                    </td>
                    <td>
                        @Html.DisplayFor(model => document.File_Contents)
                    </td>
                    <td>
                        @Html.DisplayFor(model => document.Comment)
                    </td>
                </tr>
            }

        </table>
        <div class="borderline text-left">
            <h5 class="mb-0"><strong>PROJECTS</strong></h5>
        </div>
        <h6 class="text-left">@Html.DisplayFor(model => model.Statewide.Projects)</h6>
        <div class="borderline text-left">
            <h5 class="mb-0"><strong>COMMENTS</strong></h5>
        </div>
        <p class="text-left">@Html.DisplayFor(model => model.Statewide.Comments)</p>
    </div>

    <p style="margin-top: 20px">
        @Html.ActionLink("Back to List", "Index")
    </p>

</div>
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum