Bootstrap: Right align vertical pills

My relevant code:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
  <div class="container-fluid">
    <div class="row content">
      <div class="col-lg-10">
        <div class="tab-content">
          <div id="AAA" class="tab-pane fade in active">
            <h2>AAA</h2>
            <p>
              Lorem ipsum dolor 
            </p>
          </div>


          <div id="BBB" class="tab-pane fade in">
            <h2>BBB</h2>
            <p>
              Lorem ipsum dolor 
            </p>
          </div>
        </div>
      </div>



      <div class="col-lg-2 sidenav" dir="rtl">
        <ul class="nav nav-pills nav-stacked">
          <li class="active"><a href="#AAA" data-toggle="tab" class="list-group-item">AAA</a></li>
          <li><a href="#BBB" data-toggle="tab" class="list-group-item">BBB</a></li>
        </ul>
      </div>
    </div>
  </div>      
</body>

This give me a nice vertical pills aligned to the left of the column: pills stuck to the left. But I want them to be aligned to the right, like this (made in mspaint): pills on the right.

I tried every align option I could think of... But nothing worked. Thank you!

Solution

The ul has default padding on right, change it to left. I have wrapped the css inside a media query so that they will be right aligned on desktop, but you can remove that.

I have also set padding:0; for .sidenav and some border to show the alignment.

@media (min-width:768px){
  .nav.nav-pills{
    padding-right:0;
    padding-left:40px;
  }
  .sidenav{
    border:1px solid black;
    padding:0 !important;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="container-fluid">
    <div class="row content">
      <div class="col-lg-10">
        <div class="tab-content">
          <div id="AAA" class="tab-pane fade in active">
            <h2>AAA</h2>
            <p>
              Lorem ipsum dolor 
            </p>
          </div>


          <div id="BBB" class="tab-pane fade in">
            <h2>BBB</h2>
            <p>
              Lorem ipsum dolor 
            </p>
          </div>
        </div>
      </div>



      <div class="col-lg-2 sidenav" dir="rtl">
        <ul class="nav nav-pills nav-stacked">
          <li class="active"><a href="#AAA" data-toggle="tab" class="list-group-item">AAA</a></li>
          <li><a href="#BBB" data-toggle="tab" class="list-group-item">BBB</a></li>
        </ul>
      </div>
    </div>
  </div>      
</body>