Q: Right align menu nav items I have this menu that I need to right align all the nav-item.
I've tried to play around with position, float and right:0, but nothing seems to work.
<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md">
        <div class="container" style="background-color:#ff6a00;padding:22px;position:relative;">
            <div class="navbar-header">
                <button type="button" class="navbar-toggler navbar-toggler-right" style="position:absolute;top:46px" data-toggle="collapse" data-target="#navbarFullCollapse">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <a asp-controller="Home" asp-action="Index" class="navbar-brand"><h1>Artist Name</h1></a>
            </div>
            <div class="navbar-collapse collapse" style="position:relative;right:0px;">
                <div class="navbar-nav">
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Overviev">Oveview</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Grafiti">Grafitti</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Digital">Digital</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Pencil">Pencil</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Graphic">Graphics</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Mase">Mase</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="GrandCentral">Grand Central</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Painting">Painting</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Mjau">Mjau</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Misc">Misc</a>
                </div>
            </div>
        </div>
    </nav>


A: Use the justify-content-end helper class on the parent of your nav items. That will align the flex children to the end of the main axis in the flex row.


<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md">
  <div class="container" style="background-color:#ff6a00;padding:22px;position:relative;">
    <div class="navbar-header">
      <button type="button" class="navbar-toggler navbar-toggler-right" style="position:absolute;top:46px" data-toggle="collapse" data-target="#navbarFullCollapse">
                    <span class="navbar-toggler-icon"></span>
                </button>
      <a asp-controller="Home" asp-action="Index" class="navbar-brand"><h1>Artist Name</h1></a>
    </div>
    <div class="navbar-collapse collapse justify-content-end" style="position:relative;right:0px;">
      <div class="navbar-nav">
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Overviev">Oveview</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Grafiti">Grafitti</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Digital">Digital</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Pencil">Pencil</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Graphic">Graphics</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Mase">Mase</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="GrandCentral">Grand Central</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Painting">Painting</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Mjau">Mjau</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Misc">Misc</a>
      </div>
    </div>
  </div>
</nav>


