Divs don't span whole width. - html

Question

Looking at other SO questions, I managed to get the left divs span the whole page, but not the right divs. How do I fix this problem?
HTML:
<div class="container-fluid">
<div class="row col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div id="kpop" class="selection">
</div>
<div id="fashion" class="selection">
</div>
</div>
<div class="row col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div id="martialarts" class="selection">
</div>
<div id="nature" class="selection">
</div>
</div>
</div>
CSS:
body .container-fluid {
padding-left: 0;
padding-right: 0;
}
.selection {
height: 50vh;
}
Here's a demo:
http://codepen.io/davegumba/pen/QNzpey

Answer 1

You didn't wrap your col classes in a row tag. Also you don't need to specify all the viewport sizes if they are all 6, for example. Col-xs-6 alone will apply to all sizes higher if you don't specify.
http://codepen.io/ruchiccio/pen/oxJWLQ
<div class="container-fluid">
<div class="row">
<div id="kpop" class="selection col-xs-6">
</div>
<!--kpop-->
<div id="fashion" class="col-xs-6 selection">
</div>
<!--fashion-->
</div>
<!--first column-->
<div class="row">
<div id="martialarts" class="col-xs-6 selection">
</div>
<!--martial arts-->
<div id="nature" class="selection col-xs-6"> </div>
<!--nature-->
</div>
<!--second column-->
</div>
<!--container-->

Answer 2

You should not use a twitter bootstrap's "row" in a col. Row class was ment and built to rows not columns. So it has a negative margin on each side. That's what is making your 50% return a lower value.
Get rid of the class row and it will be fixed. Or if you want to preserve it remove the negative margin on both sides of both columns

Answer 3

You can fix this by removing the "row" class from your columns, then removing the padding on the columns. The "row" class should be used as a container for the columns. Although I find that not even using it works fine at times, but it isn't proper. Also, like some others have said, you don't need to use multiple column sizes. You need to choose a size based on what you want your content to do at smaller viewport widths.
<div class="container-fluid">
<div class="col-xs-6">
<div id="kpop" class="selection">
</div>
<!--kpop-->
<div id="fashion" class="selection">
</div>
<!--fashion-->
</div>
<!--first column-->
<div class="col-xs-6">
<div id="martialarts" class="selection">
</div>
<!--martial arts-->
<div id="nature" class="selection">
</div>
<!--nature-->
</div>
<!--second column-->
</div>
<!--container-->
Styles:
.col-lg-6, col-md-6, col-sm-6, col-xs-5 {
margin: 0;
padding: 0;
}

Answer 4

The problem isn't with the code itself, it's with the structure of the HTML. In order to properly use Bootstrap, you need a row to wrap the columns. What you have right now is the rows and columns all in the same. Also, just as a side note, it's considered best practice to define starting at the smallest screen and work your way up to larger screens since the framework is mobile-first.
Here is how you could rewrite your code with the suggested changes:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div id="kpop" class="selection">
</div>
<div id="fashion" class="selection">
</div>
</div>
<!-- End col -->
<div class="col-xs-6">
<div id="martialarts" class="selection">
</div>
<div id="nature" class="selection">
</div>
</div>
<!-- End col -->
</div>
<!-- End row -->
</div>
<!-- End container-fluid -->
Another thing you should keep in mind is that since Bootstrap is mobile-first, you don't need to repeat column definitions, as they automatically ripple up. For example, you defined 6-block columns for xs, s, m, and l screens, but you only need to define it for xs since it will automatically apply to all larger screens (s, m, l) unless it gets overwritten.

Answer 5

Inspecting the code seems the problem is related to the fact you have the class row .row with margin-right and margin left = -15px;
set both to 0
.row {
margin-right: 0px;
margin-left: 0px;
}

Answer 6

I did this:
Basically, removed row class and added no-padding class to all column classes.
http://codepen.io/anon/pen/mPamEZ
<div class="container-fluid">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding">
<div id="kpop" class="selection">
</div>
<!--kpop-->
<div id="fashion" class="selection">
</div>
<!--fashion-->
</div>
<!--first column-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding">
<div id="martialarts" class="selection">
</div>
<!--martial arts-->
<div id="nature" class="selection">
</div>
<!--nature-->
</div>
<!--second column-->
</div>
<!--container-->
body .container-fluid {
padding-left: 0;
padding-right: 0;
background-color:#ccc
}
.selection {
height: 50vh;
}
#kpop {
background: #7BECED;
}
#fashion {
background: #FFB5A7;
}
#martialarts {
background: #F3BB72;
}
#nature {
background: #B1DC76;
}
.no-padding{ padding-left: 0;
padding-right: 0;}

Answer 7

You can simply reset your margin and padding in .col-xs-6 to 0. Also, I dixed your markup - .row class should wrap .col-s classes. Take a look to Bootstrap documentation of grid system.
Here it is.
body .container-fluid {
padding-left: 0;
padding-right: 0;
}
.full-width {
margin: 0;
padding: 0;
}
.selection {
height: 50vh;
}
#kpop {
background: #7BECED;
}
#fashion {
background: #FFB5A7;
}
#martialarts {
background: #F3BB72;
}
#nature {
background: #B1DC76;
}
<div class="container-fluid">
<div class="row">
<div class="full-width col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div id="kpop" class="selection">
</div>
<!--kpop-->
<div id="fashion" class="selection">
</div>
<!--fashion-->
</div>
<!--first column-->
<div class="full-width col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div id="martialarts" class="selection">
</div>
<!--martial arts-->
<div id="nature" class="selection">
</div>
<!--nature-->
</div>
<!--second column-->
</div>
</div>
<!--container-->
Be careful, this changes can touch other divs in your page.
P.S It's better to create new class, for example full-width and give to it same rules. This will not broke your page. JSFiddle.