I am experiencing an issue with my search bar in the navbar. It displays correctly in Firefox, but in Google Chrome, the search bar stretches and overlaps with the navigation bar. How can I resolve this problem?
<div class = "navbar navbar-inverse navbar-fixed-top">
<div class = "navbar-inner">
<div class = "container">
<a href = "#" class = "navbar-brand">SIG Inventory System</a>
<div class="navbar-header">
<button type='button' class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
</div>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav ">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">About</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control input-sm " placeholder="Search..." name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-danger btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
<!--<form class="nav navbar-form navbar-right" role="search">
<div class="form-group ">
<input class="form-control input-sm " placeholder="Search..." type="text">
</div>
<button type="submit" class="btn btn-danger btn-sm">
<span class="fa fa-search"></span>
</button>
</form>-->
</div>
</div>
</div>
</div>