All divs/rows the same size in Bootstrap

[harry_ord]

This is my page:

http://codelcolab.feriapixel.cl/

When i shrink the browser window or watch it on a mobile device, the first divs (with class row) have least width than the ones that came after them, so i'm having a blank space to the right of the first divs because of the wider ones. How can i do to make all the divs the same width?

Here is how it looks, notice the white space to the right of the orange boxes:

[dsonesuk]

The last class 'row' container element, containing last two orange boxes, as well as many other element (including those with id 'bases' and 'postulacion'), has class 'row' as well, this is causing the problem of the website being to long lengthwise causing scrollbars to appear, remove these inner class 'row' classes, and it should fix itself.

 

NOTE: these are collapsed copy of parent elements, so they are not showing relative closing elements correctly

 

<div class="row">
<div class="col-sm-6" style="text-align: center; background-color: rgb(224,106,45); color: #fff; padding: 50px; height: 350px;">
<div class="col-sm-6" style="text-align: center; background-color: rgb(224,134,88); color: #fff; padding: 50px; height: 350px;">

//place here
<div id="bases" class="row" style="text-align: center; background-image: url(img/IMG-20161007-WA0002.jpg); padding: 60px; height: 550px;">
<div class="row" style="text-align: center; font-size: 16px;">
<div class="container">
</div>
<div id="postulacion" class="row" style="background-color: rgb(64, 64, 64); color: #fff; text-align: center; padding: 50px;">
<div class="row" style="background-image: url('img/IMG-20161007-WA0003.jpg'); height: 600px; position: relative; text-align: center; ">
<div class="row" style="background-image: url('img/ref-12178793.png'); padding-top: 80px; padding-bottom: 80px; color: #fff;">
<div class="row" style="padding: 60px;">
<div class="row" style="background-color: rgb(64, 64, 64); color: #fff; padding: 50px;">
</div>

 

BUT! looking at it Again! I think you have most likely misplaced closing div of row which is supposed to contain only the last two orange background elements.

 

The closing </div> following the LAST closing class 'row' in Lime should be before <div id="bases"... element

Edited October 13, 2016 by dsonesuk

[harry_ord]

Problem fixed, thanks a lot. That was exactly the problem, the closing div missing.

[harry_ord]

Ok, the problem is not totally solved, now everything has the same width and when i shrink the screen everything looks ok, but when i watch the page in my phone, the browser displays a big white space to the right of the document, i don't know why.

[dsonesuk]

What did expect, using position: relative; left 50%, transform: translate(); min-height: 100%; on narrow height landscape video, causing it to extend beyond its boundaries to be proportionately correct, all add up to something going terribly wrong down the road. Fix the video, the problem will not exist.

[harry_ord]

But i'm using "display:none" for the video container, for screens with max 600px i'm displaying another div called "oculto" (hidden in spanish).

[harry_ord]

I fixed it!

One of the problems was that Bootstrap created an extra space to the side everytime i put a row inside another row, i don't know why. The other was just untidy code.