Bootstrap - center inner div - css

Question

I have this : http://www.bootply.com/apUgehnGLq
Why width of red box is so big ? I want it to finish immediately after last box, which is a box with tag CCC and then center the whole red box.

Answer 1

Since you're working with % in the inner div you are going to have to make the percentages bigger and the div smaller till you have the size you prefer, like so:
http://www.bootply.com/juFV1xgpNY
Just play around with the withs of the .inner and the divs inside of it.

Answer 2

The border adds pixels to the width of the box, so the last box goes on a new line. You can set box-sizing: border-box; on the body and a padding on the .border instead of a margin to achieve what you want.
I updated your code: http://www.bootply.com/1s5ESfKlod
Read more about what the box-sizing property can do at Mozilla Developer Network.
Update
See code here: http://www.bootply.com/ASWCuTHrZy
You can control the items in this example using flex-basis, where the X items is 3.
flex-basis: calc(100% * 1/3);
So 100 divided by 1/3 makes 33.333..%, that's the width of the AAA, BBB, CCC containers. DDD will go to the next line.
All used CSS:
body * {
box-sizing: border-box;
}
.border {
padding: 5px;
border: 2px solid black;
}
#inner {
border: 2px solid red;
width: 80%;
}
.container-fluid {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.border {
flex-basis: calc(100% * 1/3);
}

Answer 3

The issues you are having with the 4 columns not lining up is due to the margin you have set in the .border class, as well as the class for #inner id. So, if you remove the border margin we should be able to resolve all the issues. Like so:
<div id="center" class="col-lg-7">
<div class="col-md-4 border">AAA</div>
<div class="col-md-4 border">BBB</div>
<div class="col-md-4 border">CCC</div>
<div class="clearfix"></div>
<div class="col-md-12 border">DDD</div>
</div>
Alternatively, if you would like to have all the 4 columns to line up, you can just code it like so:
<div id="center" class="col-lg-7">
<div class="col-md-3 border">AAA</div>
<div class="col-md-3 border">BBB</div>
<div class="col-md-3 border">CCC</div>
<div class="col-md-3 border">DDD</div>
</div>
You can view the sample code here: http://www.bootply.com/GZJwteX6yT
I hope this helps you!