Containers height and margins

Containers height and margins
0
#1

Hello!

I started to create first site for challenge (“Tribute Page”). And I have two serious and very annoying issues. I have two containers and I want them to have the same height value. I can set fixed height for both of them but the text will splash and go outside the container on smaller monitor I use. So - how to set the two containers to be same height and look the same on different sizes (17" and 24" as well).
Second question - margins. I have .jumbotron margin-left and -right set for 10 %. The same values I set for two container but… they have different size! How to set margin of all three containers to fit each other?
Here’s my project site: https://codepen.io/icelandico/pen/aqNOLJ

Thanks in advance!

#2

Can you provide the code that causes your problem? I’d like to see what you’re trying.

This is probably not what you want to do. Can you describe what you mean by “fit each other”? How do you want your containers to look?

I noticed that you have two divs with a col-md-x class, but they’re not wrapped in a row class. Remember, in order to get the grid system to work, you have to wrap your columns in a row:

<div class="row">
    <div class="col-md-8"> ... </div>
    <div class="col-md-4"> ... </div>
</div>

These problems aside, I think your tribute page looks pretty awesome. I love the topic and the map background actually works well (I think most image background interfere with the text).

#3

Hey, thanks for quick response and positive feedback! When I wrote “three containers fit each other” I meant to have the same margin from left and right for all of three containers. Now, even if the upper one (jumbotron) and two lower has the same margin value (10), they don’t have the same margin as You can see.

jumbotron {
margin: 1% 10%;

#left {
margin-left: 10%;

#right {
margin-right: 10%;

I didn’t set the height value for #right and #left. So now as You can see the right container is bit ‘higher’. So how to make them same height and be responsive?