So I have a simple HTML layout using Bootstrap 3. I have one outer div that contains two divs on the inside. The top inner div seems to be wider than the bottom inner div. Because both have background colors I am wanting them to be the same width as each other. I am struggling to accomplish that.
PLEASE NOTE: The actual application uses Angular NG-REPEAT to build the inner divs, so the outer div needs to be left alone completely. It is where the NG-REPEAT is defined.
I have published a JSFiddle for you to see the problem. The gray div needs to be the same width as the blue div. Help?
JSFiddle showing the problem
The HTML code:
<div class="col-sm-10 col-sm-offset-1 caselist">
Information goes here
border: 1px solid #b3b3b3;
The bootstrap classes you added to the outermost div are adding padding that you don't want. Remove the
col-sm-* classes and you'll lose that extra padding. Also you've got a hard coded height on the
case-list class, which is causing it not to expand with its contents, giving you the appearance of the inner div being misaligned.
The Computed tab in the Dev Tools window is your friend in situations like this. Also, FYI, bootstrap will add all kinds of custom styling to generic elements like form inputs, that you may or may not want.