어떻게하면 머리글과 텍스트가 반응합니까?

Question

내 웹 사이트에 문제가 있습니다. 나는 멋진 헤더와 텍스트를 만들었지 만, 일부 사이트에서는 내 사이트에서 repsonsive하게 된 게 하나 있습니다. 너희들을 도와주세요 < 3.

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가 .container 대답하는 폭을 만들기 시작합니다. width:960px을

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