Help! Text with over image, not workin and can't make it responsive

Language Help
1

Hey there! I’m new at programming, started a few days ago the HTML course and now I’m taking CSS lessons. I downloaded Sublime Text so I can practice on my own and Im stuck with something I can’t solve. Maybe someone can help me! I’ll try to do my best with my english, I guess the images will help you to understand.

My “website” actually consists of a index page where I have a navigator fixed, and image and a text with a border that I cant get to center it correctly over the image… I just want it to be over it with a little margin all around it and make it responsive.

HTML:

  <main>
      <div class="jumbotron">
        <div class="container">  
          <h1>JAZZ EXPLOTION</h1> 
        </div>
      </div>
    </main>

CSS:

.container { 
  max-width: 940px;
  margin: 0 auto;
  padding: 0 10px;
  text-align: center; 
}

.jumbotron {
  height: 800px;
  background-image: url("https://i.pinimg.com/originals/0e/aa/51/0eaa514253243381535903650d4b704d.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.container h1 {
  position: relative; 
  color: white;
  text-align: center;
  font-size: 100px;
  font-family: "Poppins";
  left: 0; 
  width: 100%;
  border: 3px solid white;
  padding: 180px 180px;

Heres a pic of my “website”, with full browser and besides the broswer its narrowed and text still huge:

PNG
606dfd6d952eaa7a26be477ae203cb92625a29eb.jpeg2632×1032 547 KB

Hope you can help me!

Thanks,

Carolina

2

you could just copy paste your code to the forum? And then apply format:

How to ask good questions (and get good answers)

your post for the rest is fine. This topic jut also contains a comprehensive explanation about formatting and a link to further topic for more information about formatting.

3

Done! thank you very much

4

you know how to use the browser inspector? if not, i highly recommend you to google this:

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector

if you use this tool, you can see that the container is perfectly in the middle, but the box is exceeding its maximum width.