How to align the content of a Nav Bar so that it stays in the center of the screen?

[Nykeriab]

I have a nav bar that I need to put your content in the center of the screen, I've tried several codes but it always gets left, follow my current code

<nav class="navbar navbar-inverse navbar-fixed-top justify-content-center" style="background-color: #e7ebd5;">
        <div class="container">
            <div class="navbar-header">
                <div class="row justify-content-center">                  
                        <div id="ImagemLogo">
                            <img src="~/images/TerraVerdeLogo.png" class="img-responsive"> 
                    </div>
                </div>
                    &lt;a asp-area="" asp-controller="Home" style="color:#ffffff ; font-size:15px;text-align:center" asp-action="Index" class="navbar-brand"&gt;Home&lt;/a&gt;


                    &lt;a asp-area="" asp-controller="Loja" style="color:#ffffff; font-size:15px;" asp-action="Index" class="navbar-brand"&gt;Loja&lt;/a&gt;


                    &lt;a asp-area="" asp-controller="Home" style="color:#ffffff; font-size:15px;" asp-action="LoginCliente" class="navbar-brand"&gt;Login/Cadastro de Clientes&lt;/a&gt;


        &lt;/div&gt;
        @inject IHttpContextAccessor HttpContextAccessor
        &lt;div id="NomeUsuarioLogado"&gt;&lt;/div&gt;
        @inject IHttpContextAccessor HttpContextAccessor
        &lt;div id="NomeClienteLogado"&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;/nav&gt;

[rielyn]

See that vc is putting the class justify-content-center navbar, but vc placed as his direct son navabar a div with the class container, this prevents centralized alignment.

To fix this just put vc class justify-content-center direct container inside navbar.

OBS: Yet I think it's quite wrong to clog a container inside navbar. You should follow the documentation to have no problems in the future! https://getbootstrap.com/docs/4.1/components/navbar/

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<nav class="navbar navbar-inverse navbar-fixed-top " style="background-color: #e7ebd5;">

<div class="container justify-content-center">

<div class="navbar-header">

<div class="row justify-content-center">

<div id="ImagemLogo">

<!-- <img src="~/images/TerraVerdeLogo.png" class="img-responsive"> -->

<img src="https://placecage.com/100/100" class="img-responsive">

</div>

</div>

<a asp-area="" asp-controller="Home" style="color:#ffffff ; font-size:15px;text-align:center"

asp-action="Index" class="navbar-brand">Home</a>

<a asp-area="" asp-controller="Loja" style="color:#ffffff; font-size:15px;" asp-action="Index" class="navbar-brand">Loja</a>

<a asp-area="" asp-controller="Home" style="color:#ffffff; font-size:15px;" asp-action="LoginCliente"

class="navbar-brand">Login/Cadastro de Clientes</a>

</div>

<!-- @inject IHttpContextAccessor HttpContextAccessor -->

<div id="NomeUsuarioLogado">logado</div>

<!-- @inject IHttpContextAccessor HttpContextAccessor -->

<div id="NomeClienteLogado">logado</div>

</div>
</nav>