Fit div to inside contents

Question

I have a background div that I use to create a "box" effect. I need this div to fit its contents but what I searched and tried to do, did not worked as expected. I'm using bootstrap.

I already tried in my div css:

display:inline-block;
display:inline-block !important;

This is my page without above css:

This is my page with above css

And this is what I need. My background "box" limit in the red line:

Page html:

<div class="input-content-boxed">
        <div class="row">
            <div class="col-md-4">
                <div class="form-group form-group-default required">
                    <label>Nome</label>
                    <input asp-for="Name" class="form-control" />
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group form-group-default required">
                    <label>CNPJ</label>
                    <input id="txtCNPJ" asp-for="CNPJ" class="form-control" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="form-group form-group-default">
                    <label>País</label>
                    <select asp-for="Country" asp-items="new SelectList(ViewBag.Countries)" id="listCountry" data-init-plugin="select2" style="width: 100%">
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group form-group-default" id="divStateBrazil">
                    <label>Estado</label>
                    <select id="listStateBrazil" asp-items="new SelectList(ViewBag.BrazilStates)" data-init-plugin="select2" style="width: 100%">
                    </select>
                </div>
                <div class="form-group form-group-default" id="divStateEUA" hidden>
                    <label>Estado</label>
                    <select id="listStateEUA" asp-items="new SelectList(ViewBag.EUAStates)" data-init-plugin="select2" style="width: 100%">
                    </select>
                </div>
                <div class="form-group form-group-default" id="divStatePeru" hidden>
                    <label>Estado</label>
                    <select id="listStatePeru" asp-items="new SelectList(ViewBag.PeruStates)" data-init-plugin="select2" style="width: 100%">
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group form-group-default">
                    <label>Cidade</label>
                    <input asp-for="City" class="form-control" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group form-group-default">
                    <label>Logradouro</label>
                    <input asp-for="Street" class="form-control" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="form-group form-group-default">
                    <label>Bairro</label>
                    <input asp-for="District" class="form-control" />
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group form-group-default required">
                    <label>CEP</label>
                    <input id="txtCEP" asp-for="CEP" class="form-control" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="form-group form-group-default">
                    <label>Número</label>
                    <input asp-for="Number" class="form-control" />
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group form-group-default">
                    <label>Observação</label>
                    <input asp-for="Observation" class="form-control" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group form-group-default required">
                    <label>Email</label>
                    <input asp-for="Email" class="form-control" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="form-group form-group-default required">
                    <label>Telefone</label>
                    <input id="txtPhone" asp-for="Phone" class="form-control" />
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group form-group-default">
                    <label>Celular</label>
                    <input id="txtCellphone" asp-for="Cellphone" class="form-control" />
                </div>
            </div>
        </div>
    </div>

Css:

.input-content-boxed {
    background-color: #ffffff;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top:15px;
    border-radius: 3px;
    box-shadow: 2px 2px 3px #888888;
    display:inline-block;
}

Answer 1

The main issue I see is you're using the Bootstrap col- classes so your contents are being forced to fit in the grid. Specifically, it appears most the rows of your layout are only using 6 out of the 12 columns of the grid, which results in the form taking up only half the available width.

You'll want to make sure the col- classes add up to 12 for each row.

For the purposes of this demo I've used the col-xs- classes so the layout fits within the narrow demo frame below. You'll probably want to use the responsive classes to the form works well across more viewport sizes.

.input-content-boxed {
    background-color: #ffffff;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top:15px;
    border-radius: 3px;
    box-shadow: 2px 2px 3px #888888;
    display:inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-content-boxed">
        <div class="row">
            <div class="col-xs-8">
                <div class="form-group form-group-default required">
                    <label>Nome</label>
                    <input asp-for="Name" class="form-control" />
                </div>
            </div>
            <div class="col-xs-4">
                <div class="form-group form-group-default required">
                    <label>CNPJ</label>
                    <input id="txtCNPJ" asp-for="CNPJ" class="form-control" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6">
                <div class="form-group form-group-default">
                    <label>País</label>
                    <select asp-for="Country" asp-items="new SelectList(ViewBag.Countries)" id="listCountry" data-init-plugin="select2" style="width: 100%">
                    </select>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group form-group-default" id="divStateBrazil">
                    <label>Estado</label>
                    <select id="listStateBrazil" asp-items="new SelectList(ViewBag.BrazilStates)" data-init-plugin="select2" style="width: 100%">
                    </select>
                </div>
                <div class="form-group form-group-default" id="divStateEUA" hidden>
                    <label>Estado</label>
                    <select id="listStateEUA" asp-items="new SelectList(ViewBag.EUAStates)" data-init-plugin="select2" style="width: 100%">
                    </select>
                </div>
                <div class="form-group form-group-default" id="divStatePeru" hidden>
                    <label>Estado</label>
                    <select id="listStatePeru" asp-items="new SelectList(ViewBag.PeruStates)" data-init-plugin="select2" style="width: 100%">
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group form-group-default">
                    <label>Cidade</label>
                    <input asp-for="City" class="form-control" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group form-group-default">
                    <label>Logradouro</label>
                    <input asp-for="Street" class="form-control" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6">
                <div class="form-group form-group-default">
                    <label>Bairro</label>
                    <input asp-for="District" class="form-control" />
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group form-group-default required">
                    <label>CEP</label>
                    <input id="txtCEP" asp-for="CEP" class="form-control" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6">
                <div class="form-group form-group-default">
                    <label>Número</label>
                    <input asp-for="Number" class="form-control" />
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group form-group-default">
                    <label>Observação</label>
                    <input asp-for="Observation" class="form-control" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group form-group-default required">
                    <label>Email</label>
                    <input asp-for="Email" class="form-control" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6">
                <div class="form-group form-group-default required">
                    <label>Telefone</label>
                    <input id="txtPhone" asp-for="Phone" class="form-control" />
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group form-group-default">
                    <label>Celular</label>
                    <input id="txtCellphone" asp-for="Cellphone" class="form-control" />
                </div>
            </div>
        </div>
    </div>