Twitter Bootstrap grid not working evenly across browsers - html

Question

I'm having problems getting a table to display uniformly across browsers using Twitter Bootstrap 3.
Here's the HTML:
<div class="row">
<div class="col-md-10 col-md-offset-1">
<table class="table table-striped table-responsive first-table">
<thead>
<tr>
<th>Ingredient</th>
<th>Amount <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Amount" data-content="This is the amount of the ingredient you want to appear on the label." aria-hidden="true"></span></th>
<th>% Carrier <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Carrier" data-content="The amount of carrier (or salt) that's used with the ingredient. This information should come from the quality assurance docs from the supplier." aria-hidden="true"></span></th>
<th>$$/Kilo <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Price" data-content="The price of the ingredient. You should get this from your supplier." aria-hidden="true"></span></th>
<th>Who Sources? <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Source" data-content="Choose whether or not you or the manufacturer will source the ingredient." aria-hidden="true"></span></th>
<th>Pack Size <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="packSize" data-content="The minimum packsize of the ingredient supplied by the provider. You only have to fill this out if you're sourcing the ingredient yourself." aria-hidden="true"></span></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="formulaRow">
<td>
<input type="text" class="ingredient required" name="ingredient">
</td>
<div class="col-md-1">
<td>
<div class="input-group">
<input type="number" class="amount required small-input" name="amount" >
<div class="input-group-addon">mg</div>
</div>
</td>
</div>
<td>
<div class = "input-group">
<input type="number" class="carrier required small-input" name="carrier" max="100">
<div class="input-group-addon">%</div>
</div>
<p class="message">Only use numbers smaller than 100</p>
</td>
<td>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="number" class="price required small-input" name="price" size="6">
<div class="input-group-addon">.00</div>
</div>
</td>
<td>
<select class="tableDropDown" style="min-width: 100px;">
<option value=true>The Manufacturer</option>
<option value=false>Me</option>
</select>
</td>
<td>
<div class="input-group">
<input class="packSize small-input" type="number" size="8" disabled>
<div class="input-group-addon">kg</div>
</div>
</td>
<td>
<a><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a>
</td>
<td>
<a><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
You can also see it here: www.healthkismet.com/formula-analyzer/
It's the table that displays under the heading: "Per Serving"
What I want: For it to be evenly centered in the screen and so you don't have to scroll to the right to finish filling in the input fields.
My condundrum: It works fine in Mozilla. It also works fine in Chrome when I view it offline from the files on my computer.
But it bleeds to the right in Chrome and IE when I view it online.
I'm not sure why has the desired effect in Mozilla but not the other two.
The ultimate goal is to have it center-align if at all possible (or close to it).
Also, here are two screenshots to demonstrate what I'm talking about.
On Chrome, the table does not offset on the right and instead gets pushed out of the window:
Whereas in Firefox it justifies properly:

Answer 1

You are wrapping a table-cell in a div. I think that breaks the table, and is handled differently by different browsers.
Try removing <div class="col-md-1"></div> from:
<tr class="formulaRow">
<td>
<input type="text" class="ingredient required" name="ingredient">
</td>
<div class="col-md-1">
<td>
<div class="input-group">
<input type="number" class="amount required small-input" name="amount" >
<div class="input-group-addon">mg</div>
</div>
</td>
</div>
<td>...