Wie mache ich Header und Text reagieren

Question

Ich habe ein Problem auf meiner Website. Ich habe einen tollen Header und ein wenig Text darüber gemacht, aber für eine Wiederholung ist das eine Sache, die auf meiner Seite nicht repsonsiv gemacht wird. Bitte helfen Sie Jungs < 3 Sie.

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 beginnen mit .container eine ansprechende Breite zu machen. Ich würde width:960px zu ändern:

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