How to reduce TABS spacing with view corners using CSS - Asp.Net MVC

Question

When I insert a tab into my view, there is a very exaggerated spacing with the edges of the page inside the modal. I’m using a framework called Remark, but I believe it can be solved with CSS. Does anyone know how to do this?

<div class="panel">
    <div class="panel-body container-fluid">
        <div class="form-horizontal">
            <vc:summary />
            <div class="nav-tabs-horizontal" data-plugin="tabs">
                <ul class="nav nav-tabs nav-tabs-line tabs-line-top" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" data-toggle="tab" href="#tabDadosGerais"
                           aria-controls="exampleTabsOne" role="tab">Dados Gerais</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-toggle="tab" href="#exampleTabsTwo"
                           aria-controls="exampleTabsTwo" role="tab">Endereços</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-toggle="tab" href="#exampleTabsThree"
                           aria-controls="exampleTabsThree" role="tab">Documentos</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-toggle="tab" href="#exampleTabsThree"
                           aria-controls="exampleTabsThree" role="tab">Contatos</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-toggle="tab" href="#exampleTabsFour"
                           aria-controls="exampleTabsFour" role="tab">Javascript</a>
                    </li>
                    <li class="dropdown nav-item" role="presentation">
                        <a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#" aria-expanded="false">Menu </a>
                        <div class="dropdown-menu" role="menu">
                            <a class="active dropdown-item" data-toggle="tab" href="#exampleTabsOne" aria-controls="exampleTabsOne"
                               role="tab">Home</a>
                            <a class="dropdown-item" data-toggle="tab" href="#exampleTabsTwo" aria-controls="exampleTabsTwo"
                               role="tab">Components</a>
                            <a class="dropdown-item" data-toggle="tab" href="#exampleTabsThree" aria-controls="exampleTabsThree"
                               role="tab">Css</a>
                            <a class="dropdown-item" data-toggle="tab" href="#exampleTabsFour" aria-controls="exampleTabsFour"
                               role="tab">Javascript</a>
                        </div>
                    </li>
                </ul>
                <div class="tab-content pt-10">
                    <div class="tab-pane active" id="tabDadosGerais" role="tabpanel">


                            @await Html.PartialAsync("_Pessoa")

                            @if (Model.PessoaNatureza == PessoaNatureza.Fisica)
                            {
                                <div id="divPessoaFisica">
                                    <!--style="display:none"-->
                                    @await Html.PartialAsync("_PessoaFisica")
                                </div>
                            }
                            else if (Model.PessoaNatureza == PessoaNatureza.Juridica)
                            {
                                <div id="divPessoaJuridica">
                                    @await Html.PartialAsync("_PessoaJuridica")
                                </div>
                            }


                        @*<div class="dropdown">
                                <button type="button" class="btn btn-primary dropdown-toggle" id="exampleColorDropdown2"
                                        data-toggle="dropdown" aria-expanded="false">
                                    Primary
                                </button>
                                <div class="dropdown-menu dropdown-menu-primary" aria-labelledby="exampleColorDropdown2"
                                     role="menu">
                                    <a class="dropdown-item" href="javascript:void(0)" role="menuitem">Action</a>
                                    <a class="dropdown-item" href="javascript:void(0)" role="menuitem">Another action</a>
                                    <a class="active dropdown-item" href="javascript:void(0)" role="menuitem">Something else here</a>
                                    <a class="dropdown-item" href="javascript:void(0)" role="menuitem">Separated link</a>
                                </div>

                            </div>*@

                    </div>
                    <div class="tab-pane" id="exampleTabsTwo" role="tabpanel">
                        Negant parvos fructu nostram mutans supplicii ac dissentias, maius tibi licebit
                        ruinae philosophia. Salutatus repellere titillaret expetendum
                        ipsi. Cupiditates intellegam exercitumque privatio concederetur,
                        sempiternum, verbis malint dissensio nullas noctesque earumque.
                    </div>
                    <div class="tab-pane" id="exampleTabsThree" role="tabpanel">
                        Benivole horrent tantalo fuisset adamare fugiendam tractatos indicaverunt animis
                        chaere, brevi minuendas, ubi angoribus iisque deorsum audita
                        haec dedocendi utilitas. Panaetium erimus platonem varias
                        imperitos animum, iudiciorumque operis multa disputando.
                    </div>
                    <div class="tab-pane" id="exampleTabsFour" role="tabpanel">
                        Metus subtilius texit consilio fugiendam, opinionum levius amici inertissimae pecuniae
                        tribus ordiamur, alienus artes solitudo, minime praesidia
                        proficiscuntur reiciat detracta involuta veterum. Rutilius
                        quis honestatis hominum, quisquis percussit sibi explicari.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

If you go in your css, probably in the class .panel will have a padding, Just set it to 0, padding: 0;.

Or in class .panel-body or .container-fluid has a margin, also just set to 0, margin: 0;

If you have a css style. just put:

.panel{
     padding: 0;
}

or

.panel-body{
     margin: 0;
}

or

.container-fluid{
     margin: 0;
}

Observing:

If it is the class .container-fluid recommend to create a new class and set from it, because this class may be being used or will be used in other points only your project, thus being able to "break" something.