Как сделать заголовок и текст отзывчивыми

Question

У меня проблема на моем сайте. Я сделал потрясающий заголовок и некоторый текст над ним, но для некоторого реанимации это единственное, что не делает репсоны на моем сайте. помогите ребятам < 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

идентификатор начать с создания .container отзывчивым ширины. Я бы изменил width:960px на:

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