Bootstrap 4 card over wrapper. Help

I have a wrapper. Inside two cards without border, and inside left card: photos, text and some button. the right card have a list of text. When screen is smaller like 574px, the right card get position down the left card but the border of that card pass the wrapper for some pixels. How can I fix this?

here the codes

Other question is how I can fix the photo of navigator in middle and the text UPEA… down? Thank you.

Thnx to any help!

Javier, please validate your CodePen account so we can see it in fullscreen.

Thank you Jacey. Its done.

First couple of issues:

  1. For HTML 5 compliance, you need to declare your doctype with as the very first thing in your code.
  2. You must include <meta name="viewport" content="width=device-width, initial-scale=1"> in your <head>.
  3. In bootstrap, the entire body of your HTML needs to be wrapped in a container: either .container or .container-fluid.

Start with those things first. I would highly recommend this Bootstrap tutorial:

It’s for Bootstrap 3, but totally relevant to Bootstrap’s fundamentals.

Thank you Jacey! I can start to dig more.

Sorry, Javier…I forgot to preformat the HTML in my post, so #2 didn’t make any sense since it was missing the important part.