How do you tell which css class to modify?[Example inside] - html

Question

I am working with bootstrap, and I have for example this code snippet :
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Symptoms
<li class="divider-vertical"></li>
</li>
<li>
Services
<li class="divider-vertical"></li>
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I can see the navbar, navbar-inverse, navbar-fixed-top, container, navbar-header, navbar-toggle, sr-only, icon-bar,navbar-brand, collapse, navbar-collapse, nav navbar-nav, etc...
So - Lets say I want to align the list in this code to the center. Which class, of the 12+ classes, do I have to modify with text-align? Is there a way of "backtracking" through the divs to see which one to change? The class that directly contains the list is nav navbar-nav, but if I change :
.navbar-nav > li > a
to include text-align:center; , nothing happens. Which must mean that I changed the wrong class.
If you know a way of determining which class to change, I appreciate it!
Thank you.

Answer 1

As rsn said in a comment, the best way is to install a developer tool that comes with the browsers. I personally like the Chrome one but the Firefox one works well too. You can select an individual item on your page using the select icon (arrow pointing to a box) and see what styles are attached to it. If you're trying to change padding, look at which element on your page has the padding, and then change that class.

Answer 2

Add an Id to the one you want to edit. Id overrules classes making the site then use the styling of the id instead of the class.
Or edit starting with .navbar and add classes after that...
Eg: .navbar{...} or .navbar .navbar-header .navbar-brand{...}

Answer 3

If you want the sub-menu (symptoms, services, contact) center aligned you can just use Bootstrap's text-center helper class on the UL as follows:
<ul class="nav navbar-nav text-center">