center multi level dropdown - html

Question

I've got this working pretty much how I want EXCEPT that the drop down box values are on the left and the rest is properly centered. PLEASE HELP!
I want to keep the level 2 vales to the right of the caret and I've tried everythign I could find online. I'm drawing a total blank.
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle center-block" type="button" data-toggle="dropdown">Pick One
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1">January</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Februrary <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="http://www.amazon.com/" target="_blank">Link</a></li>
</ul>
</li>
<li><a tabindex="-1">March</a></li>
<li><a tabindex="-1">April</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">May <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="http://www.amazon.com/" target="_blank">link</a></li>
</ul>
</li>
<li><a tabindex="-1">June</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">July<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="http://www.amazon.com/" target="_blank">link</a></li>
</ul>
</li>
</ul>
</div>
</div>

Answer 1

You would just need to modify your container and dropdown divs:
The container needs to center its content
The dropdown display should be changed so that it doesn't automatically take up all the width within its container.
Here's an example:
<div class="container" style="text-align: center;">
<div class="dropdown open" style="display: inline-block;">
....
</div>
</div>