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

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.


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


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

.jumbotron {
  height: 800px;
  background-image: url("");
  -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:

Hope you can help me!



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.

Done! thank you very much

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

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