Delay (1 second) when centering navbar collapse links - css

Question

I have a CSS issue that I cannot even begin to get my head around. I have a navbar with the standard collapsed button, that when clicked shows rows of links. I have a CSS media query that stretches the rows and centers the links as so:
http://imageshack.us/a/img89/4940/t678.png
Here is the CSS that does the stretching and centering:
/* when the navbar becomes a button, center and stretch the dropdown links */
#media (max-width: 992px) {
div.navbar-collapse.navbar-ex1-collapse.navbar-right.in {
width: 100%;
text-align: center;
margin: 0 auto;
}
}
Unfortunately, when you first press the collapsible button to unfold the rows, the text does not appear centered. It takes a full 1000ms (1s) for the text to center align. You can literally watch it go from the far left side of the screen to the center.
This leads me to believe I am doing something wrong with my CSS.
How can I fix this issue?
The HTML:
<!-- navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- navbar header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="#">
<img class="img-responsive" src="assets/img/logo.png" >
</a>
</div>
<!-- collapse -->
<div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- /navbar -->

Answer 1

I found a solution.
To center the text immediately without delay, change the CSS selector from
div.navbar-collapse.navbar-ex1-collapse.navbar-right.in
to
div.navbar-collapse.navbar-ex1-collapse