Olá pessoal, sou novo com HTML e CSS, e estou desenvolvendo um site e to encontrando dificuldade em torna-lo responsivo, pelos códigos abaixo, onde estou errando?me ajudem…
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Mirror Fashion</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<header class="container">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Conteúdo do cabeçalho -->
<h1><img src="img/logo.png" alt="Logo da Mirror fashion" title="Mirror Fashion"></h1>
<p class="sacola">
Nenhum item na sacola de compras
</p>
<nav class="menu-opcoes">
<ul>
<li><a href="#">Sua Conta</a></li>
<li><a href="#">Lista de Desejos</a></li>
<li><a href="#">Cartão Fidelidade</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="#">Ajuda</a></li>
</ul>
</nav>
</header>
<div class="container destaque"><!-- Conteúdo Principal -->
<section class="busca">
<h2>Busca</h2>
<form>
<input type="search">
<button>Buscar</button>
</form>
</section>
<!-- fim .busca -->
<section class="menu-departamentos">
<h2>Departamentos</h2>
<nav>
<ul>
<li>
<a href="#">Blusas e Camisas</a>
<ul>
<li><a href="#">Manga curta</a></li>
<li><a href="#">Manga comprida</a></li>
<li><a href="#">Camisa social</a></li>
<li><a href="#">Camisa casual</a></li>
</ul>
</li>
<li><a href="#">Calças</a></li>
<li><a href="#">Saias</a></li>
<li><a href="#">Vestidos</a></li>
<li><a href="#">Sapatos</a></li>
<li><a href="#">Bolsas e Carteiras</a></li>
<li><a href="#">Acessórios</a></li>
</ul>
</nav>
</section>
<!-- fim .menu-departamentos -->
<section class="banner-destaque">
<figure>
<img src="img/destaque-home.png" alt="Promoção: Big City Night">
</figure>
</section>
<!-- fim .banner-destaque -->
</div>
<div class="container paineis">
<!-- os painéis de novidades e os produtos mais vendidos entrarão aqui dentro -->
<section class="painel novidades">
<h2>Novidades</h2>
<ol>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura1.png" alt="miniatura1">
<figcaption>Fuzz Cardian por apenas R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura2.png" alt="miniatura2">
<figcaption>Fuzz Cardian por apenas R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura3.png" alt="miniatura3">
<figcaption>Fuzz Cardian por apenas R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura4.png" alt="miniatura4">
<figcaption>Fuzz Cardian por apenas R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura5.png" alt="miniatura5">
<figcaption>Fuzz Cardian por apenas R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura6.png" alt="miniatura6">
<figcaption>Fuzz Cardian por apenas R$ 129,90</figcaption>
</figure>
</a>
</li>
</ol>
</section>
<section class="painel mais-vendidos">
<h2>Mais Vendidos</h2>
<ol>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura7.png" alt="miniatura7">
<figcaption>Fuzz Cardian por apenas R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura8.png" alt="miniatura8">
<figcaption>Fuzz Cardian por apenas R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura9.png" alt="miniatura9">
<figcaption>Fuzz Cardian por apenas R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura10.png" alt="miniatura10">
<figcaption>Fuzz Cardian por apenas R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura11.png" alt="miniatura11">
<figcaption>Fuzz Cardian por apenas R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura12.png" alt="miniatura12">
<figcaption>Fuzz Cardian por apenas R$ 129,90</figcaption>
</figure>
</a>
</li>
</ol>
</section>
</div>
<!-- fim .container .destaque -->
<footer>
<div class="container">
<img src="img/logo-rodape.png" alt="Logo da Mirror Fashion">
<ul class="social">
<li><a href="http://facebook.com/mirrorfashion">Facebook</a></li>
<li><a href="http://twitter.com/mirrorfashion">Twitter</a></li>
<li><a href="http://instagram.com/mirrorfashion">Instagram</a></li>
</ul>
</div>
</footer>
</body>