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

Question

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 stays to the 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>


                        <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"></div>
            @inject IHttpContextAccessor HttpContextAccessor
            <div id="NomeClienteLogado"></div>
        </div>

    </nav>

Answer 1

See that you’re putting the class justify-content-center in navbar, but you put as direct son of this navabar one div with class container, this prevents centralized alignment.

To fix this just you put the class justify-content-center right in the container within the navbar.

OBS: Although I think it’s quite wrong to clone a container within the navbar. You should follow the documentation so there are 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>