Boxcontainer placement with bootstrap - html

Question

I've been working on a problem that occured recently and i can't find how to solve it. I'm a beginner so forgive me if my problem is really simple.
<section class="container">
<div class="row">
<div class="col-md-8 text-left">
<div id="filter">
<ul>
<li><i class="icon icon-reorder"></i> All Items</li>
<li><i class="icon icon-th-large"></i> Exemple</li>
<li><i class="icon icon-th-list"></i> Exemple</li>
<li><i class="icon icon-th"></i> Exemple</li>
</ul>
</div>
</div>
<div class="col-md-4 text-right">
<div id="search">
<p>Lorem Ipsum</p>
</div>
</div>
</div>
</section>
<section class="container">
<div id="content">
<div class="row">
<div class="col-md-9">
<div class="boxportfolio3 item cat2 cat3">
<div class="boxcontainer">
<img src="../img.jpg" alt="">
<div class="roll">
<div class="wrapcaption">
<i class="icon-link captionicons"></i>
<a data-gal="prettyPhoto[gallery1]" href="../img.jpg" title="Exemple"><i class="icon-zoom-in captionicons"></i></a>
</div>
</div>
<h1>Exemple</h1>
<p>
Exemple
</p>
</div>
</div>
<!-- box 2 -->
<div class="boxportfolio3 item cat1">
<div class="boxcontainer">
<img src="../img.jpg" alt="">
<div class="roll">
<div class="wrapcaption">
<i class="icon-link captionicons"></i>
<a data-gal="prettyPhoto[gallery1]" href="../img.jpg" title="Exemple"><i class="icon-zoom-in captionicons"></i></a>
</div>
</div>
<h1>Exemple</h1>
<p>
Exemple
</p>
</div>
</div>
<!-- box 3 -->
<div class="boxportfolio3 item cat2 cat3">
<div class="boxcontainer">
<img src="../img.jpg" alt="">
<div class="roll">
<div class="wrapcaption">
<i class="icon-link captionicons"></i>
<a data-gal="prettyPhoto[gallery1]" href="../img.jpg" title="Exemple"><i class="icon-zoom-in captionicons"></i></a>
</div>
</div>
<h1>Exemple</h1>
<p>
Exemple
</p>
</div>
</div>
<!-- box 4 -->
<div class="boxportfolio3 item cat1">
<div class="boxcontainer">
<img src="../img.jpg" alt="">
<div class="roll">
<div class="wrapcaption">
<i class="icon-link captionicons"></i>
<a data-gal="prettyPhoto[gallery1]" href="../img.jpg" title="Exemple"><i class="icon-zoom-in captionicons"></i></a>
</div>
</div>
<h1>Exemple</h1>
<p>
Exemple
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="text-side">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac velit luctus, pharetra magna eu, auctor purus.</p>
</div>
</div>
</div>
</div>
</section>
Now since i want my block to be divided in 2 I used a col-md-9 and a col-md-3.
What i get is this : http://image.noelshack.com/fichiers/2015/20/1431873111-resultat.jpg
What i had and what i would like is this : http://image.noelshack.com/fichiers/2015/20/1431873148-attente.jpg
I want my boxcontainer to fill the full space of the col-md-9, but there is this blank space that I cannot fill and I don't know why.
I hope i was clear enough since english is not my native language, and since i'm still a beginner in programming. I'd be happy to hear advices from you.

Answer 1

It seems you have defined margins for your "box" items. This means that the width of the div with id="content" is now small to contain your box items plus their margins. try removing any margins