How do i make header and text responsive

Question

I have a problem on my Website. I have made an awesome header and some text over it but for some reasin that is the one thing that doesnt get made repsonsive on my site. please help guys <3 you.

HTML:

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <div class="container"> 
       <div class="background"><img src="IMG/Background.jpg">    
         <h1 class="BackgroundText fadeInLeft animated">More than 1000+</br>Templates</h1>
         <a class="Button" href="#1">Templates</a>
       </div>
     </div>

CSS:

.container {
width: 960px;
margin: 0 auto;
}
.background {
margin-top: 0px;
box-shadow: 10px 10px 5px #888888;
width: 100%;
margin-left: -470px;
}
.BackgroundText {
margin-top: -550px;
font-size: 100px;
color: #94c42f;
margin-left: 300px;
}
.Button {
margin-left: 400px;
font-size: 50px;
background-color: #94c42f;
padding: 5px;
border-radius: 10px;
color: #ffffff;
box-shadow: 0px 5px 0px #678920;
}

Answer 1

id start with making .container a responsive width. I'd change width:960px to:

max-width:960px;
width:100%;