Unwanted Boostrap gutter spacing/margin/padding between rows - html

Question

Problem:
Do you see the gutter spacing between them? I'd like to get rid of that and add custom ones to match the margin at the bottom.
Here's the page's code:
#posts
.row
- #posts.each do |post|
.col-xs-12.col-sm-6.col-md-4.col-lg-3
.post
.post_content
.title
%h2
= link_to truncate((post.title), length: 25), post
%p
$
= post.price
.post_image
= link_to image_tag(post.image.url), post
.data.clearfix
%p.username
Listing by
= post.user.name
%p.buttons
%span
%i.fa.fa-comments-o
= post.inquiries.count
%span
%i.fa.fa-thumbs-o-up
= post.get_likes.size
And of course, the CSS:
#posts {
.post {
margin: .5rem;
border: 1px solid #9B9B9B;
&:hover {
border: 1px solid white;
};
.post_image {
height: 20rem;
overflow: hidden;
img {
width: 100%;
border-radius: .3rem .3rem 0 0;
}
}
.post_content {
margin: 1rem;
h2 {
margin: 0;
font-weight: 100;
padding: 1rem;
border-bottom: 1px solid #E4E4E4;
font-size: 1.5rem;
a {
text-decoration: none;
/*color: #333233;*/
&:hover {
color: #6E58E0;
}
}
}
.data {
/*padding: .75rem 5%;*/
color: #969696;
.username, .buttons {
margin: 0;
font-size: 1rem;
}
.username {
float: left;
}
.buttons {
float: right;
span {
margin-left: .5rem;
}
}
}
}
}
}
Ideally, you should show me how to style it so that the individual posts are squares with even margin between them.

Answer 1

Simply add this (the other answer had the same idea but you don't need the commas since you're using HAML):
.col-xs-12.col-sm-6.col-md-4.col-lg-3 {
padding-right: 0;
padding-left: 0;
}
The reason is that Boostrap's row comes preloaded with paddings (not margins) of 35px and 15px. Therefore you need to reset it or set your own.

Answer 2

In the Sass version of Bootstrap, find the _variables.scss file. Search for "$grid-gutter-width". You can adjust this value to whatever you want to affect the gutter width.
The default gutter width is this:
$grid-gutter-width: 30px !default;
Change that to something smaller to see if that works.
If you're working in the already compiled version of Bootstrap, you'll have to adjust this crazy set of code:
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px
}
Adjust the padding-left and padding-right here, or override them in your own css.

Answer 3

You shouldn't override default css, like in most answers.
To keep the default bootstrap css you could use this:
<div class="customdiv">
<div class="col-xs-12.col-sm-6.col-md-4.col-lg-3">
content here
</div>
</div>
You can than add the styling to customdiv.
.customdiv{
boder:2px red;//or something
}
When you override the bootstrap css you dont have the padding anymore at spots where you do want the padding.