Bootstrap 4 Jumbotron margin problems

HTML-CSS
#1

Hello. I have been recently diving into bootstrap as i really enjoy how fast i can build things with it. I have a problem in my most recent build. I want the jumbotron to be ontop of a background image that spans the whole section. The problem is, when i put margin-top on the .jumbotron class, the whole section moves down, including the background image. Im 99% sure this is an HTML issue, as i’m just learning Bootstrap 4 right now. Please look at my code and give me some help!

Here is the codepen

#2

Give the container some top padding. You can use a utility class if you like, add the pt-1 class to the container.

#3

Thank you so much lasjorg. I am just learning bootstrap and did not realize you can put padding with html class. Cheers

#4