pset7 finance - centre align the nav bar

Question

I am struggling to align the nav bar to the centre in pset7 finance. I've done everything else, including all the other formatting to match the staff solution but, this has me stumped! My code is below.

<ul class="nav nav-pills">
    <li><a href="buy.php">Buy</a></li>
    <li><a href="sell.php">Sell</a></li>
    <li><a href="quote.php">Quote</a></li>
    <li><a href="history.php">History</a></li>  
    <li><a href="password.php">Change Password</a></li>   
    <li><a href="logout.php"><strong>Log Out</strong></a></li> 
</ul>

So far I've tried creating a .center class with margin:auto and text-align: center within the table class in bootstrap.css, before then wrapping the code within this. I have also tried using different css files as there was a suggestion elsewhere that they are corrupted. So far though I have had no luck so any help would be much appreciated. Thanks a lot.

Answer 1

I had the same problem. I then compared http://finance.cs50.net/css/styles.css to my local styles.css and there were a few additional styles including one for the nav bar. I copied the styles.css from the reference solution and now it looks good :)

Answer 2

CSS is often so confusing (even for me sometimes :D). You often have to try things out to understand what they actually do.

For example, when you set the margin to auto, typically your un-ordered list is supposed to be centered by the browser. But you don't see that because perhaps it has a 100% width. To fix that, you should assign a smaller value to the width property of the <ul> element.

If you want it to be 100% wide and you want the <li> elements to be centered, I think there are many ways to do that one of which is to set the text-align property of the <ul> element to center.