Why is this only centering when I'm zoomed in? (using bootstrap) - css

Question

If you put the below code in fullscreen, the elements are only centering on the page once I'm zoomed in enough. How can I make it so it's centered regardless?
.col-centered {
float: none;
text-align: center;
}
.col-centered table {
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container-fluid'>
<div class='quiz-list'>
<div class='row'>
<div class='col-md-4 col-centered'>
This text should be centered and the table underneath should be centered as well
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

Answer 1

Because Bootstrap.
The default value for width on a .col-md-4 is 33.3333%. So, since the div doesn't have float or margins or anything, it is simply aligned to the left side of the screen, and the content inside it is centred all right, but that isn't noticeable.
One solution is to remove the col-md-4 class.
.col-centered {
float: none;
text-align: center;
}
.col-centered table {
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container-fluid'>
<div class='quiz-list'>
<div class='row'>
<div class='col-centered'> <!-- this -->
This text should be centered and the table underneath should be centered as well
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I tried other solutions as well, such as setting the width or the margins explicitly, but that doesn't seem to work.
Edit:
Oh, I see why the other solutions don't work: because in this snippet the Bootstrap css is loaded after the style block in the page.
Under normal circumstances, putting things in a stylesheet after loading the Bootstrap stylesheet will work fine to override it. So you can use width:auto or margin:0 auto, whatever you like.

Answer 2

In css file, Update
.col-centered {
float: none;
text-align: center;
}
as
.col-centered {
float: none !important;
text-align: center;
margin: 0 auto;
}