Boa tarde pessoal. Estou no capitulo 4 da apostila da Caelum e estou tendo dificuldade para colocar a imagem alinhada com o menu. Poderiam me ajudar?
html:
Mirror Fashion<body>
<header class="container">
<img src="img/logo.png" alt="Mirror Fashion">
<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 de Fidelidade</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="#">Ajuda</a></li>
</ul>
</nav>
</header>
<section class="container destaque">
<div class="busca">
<h2>Busca</h2>
<form>
<input type="search">
<button>Buscar</button>
</form>
</div>
<div class="menu-departamentos">
<h2>departamentos</h2>
<ul>
<li><a href="#">blusas e camisas</a></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>
</div>
<div class="banner-destaque">
<figure>
<img src="img/destaque-home.png" alt="Promoção: Big City Night">
</figure>
</div>
</section>
<section>
</section>
<footer>
</footer>
</body>
css:
body {
color: #333333;
font-family: “Lucida Sans Unicode”,“Lucida Grande”, sans serif;
}
.container{
margin: 0 auto;
width: 940px;
position: relative;
}
/*
CSS do Cabeçalho
*/
.sacola{
background-image: url(…/img/sacola.png);
background-repeat: no-repeat;
background-position: top right;
font-size: 14px;
padding: 8px 35px 0 0;
text-align: right;
width: 140px;
position: absolute;
top: 0;
right: 0;
}
.menu-opcoes {
position: absolute;
right: 0;
bottom: 0;
}
.menu-opcoes ul{
font-size: 15px;
}
.menu-opcoes li {
display: inline;
margin-left: 20px;
}
.menu-opcoes a{
color: #003366;
}
.banner-destaque img{
max-width:100%;
height:auto;
}
/*
CSS da pagina HOME
*/
.destaque {
margin-top: 10px;
}
.busca,
.menu-departamentos {
background-color: #DCDCDC;
font-weight: bold;
text-transform: uppercase;
float: left;
margin-right: 10px;
width: 230px;
}
.busca h2,
.busca form,
.menu-departamentos h2 {
margin: 10px;
}
.menu-departamentos {
clear: left;
margin-top: 10px;
padding-bottom: 10px;
}
.menu-departamentos li {
background-color: white;
margin-bottom: 1px;
padding: 5px 10px;
}
.menu-departamentos a {
color: #333333;
text-decoration: none;
}
.busca input[type=search] {
width: 170px;
}