Can't figure this out

Working on my second project for front-end developement and I’m trying to have these 2 containers right next to each other. I’ve been working on this for hours and wouldn’t ask for help if I didn’t really need it. I tried researching grids but everything I found made perfect sense but didn’t solve my problem. Can anyone point me in the direction on how to have 2 jumbotron classes next to each other underneath my nav bar? I’ll provide link below.

Link: https://codepen.io/nicer00ster/pen/aVBaQe

Try wrapping your two containers in a row.

For example:

Also, you’re using id=“jron1” twice. IDs should be unique. I recommend either making a second ID, or making that a class instead.

Oops.

For example:

<div class="row">
    <div class="jumbotron img-thumbnail col-md-6" id="jtron1">
    <div class="jumbotron img-thumbnail col-md-6" id="jtron2">
</div>```

Yeah… I tried that but the second jumbotron just nests into the first. :frowning:

I just forked it, take a look: https://codepen.io/ethanryan/pen/QOGeNg

Also make sure your browser is wider than 767px. It’ll show mobile view when it’s smaller than that.

No one else has mentioned this, but both of the image tags are missing a closing >

1 Like

Omg. Lol I must’ve used the row class more than 100 times because I had a feeling that was what it was but I didn’t realize that my ending div was closing before the 2nd container was linked. Thank you so much for the feedback, made me see things a little clearer. :slight_smile:

1 Like

Awesome, glad I could help!