Encountering a peculiar issue here. I'm attempting to replicate this section, but hitting a snag. When the button is positioned on the left of the field, everything lines up perfectly. However, when it's moved to the right (which seems more intuitive for a "submit" function), there's an irksome 5-10px padding above the button that just won't budge:
Here's my code snippet:
<div class="col-sm-7">
<h3>Get the latest Amazon News first:</h3>
<div class="input-group">
<input type="text" class="form-control" placeholder="E-mail" />
<span class="input-group-btn">
<button class="btn btn-default btn-group" type="submit">Sign Up</button>
</span>
</div><!-- /input-group -->
</div><!-- /col-7 -->
<div class="col-sm-5">
<h3>Get Started Now:</h3>
<a class="btn btn-large btn-primary" href="#"><i class="icon-caret-right icon-space-right"></i>Start a Free Trial!</a>
</div>
Curious as to why it works on one side but not the other. Any guidance on solving this puzzle would be greatly appreciated!