Posicionamento e formatação CSS

Front-end
#1

Galera, estou aprendendo HTML e CSS seguindo as aulas em video no youtube. Consegui um exemplo aqui, ocorre que muitas das aulas nao existem mais. Dai, logo no inicio, me deparei com o seguinte problema:
tenho um head onde coloquei uma logo, um menu in line e uma outra imagem acima dele. No corpo da pagina tem um Form para busca e um menu vertical, alem de uma imagem que deveria ficar ao centro da pagina. Ja fiz de todas as formas e nao consegui. Vejam como esta o meu codigo HTML e o Css. Onde está errado ??? Alguem me ajuda

  <h1>
      <img src="logo.png" alt="Mirror Fashion">
    </h1>
  <!-- Conteúdo do cabeçalho -->
  <p class="sacola">

  </p>

<main class="teste">
  <!-- Conteúdo principal -->

  <form>
  <input type="search">
  <button>Buscar</button>
  </form>
  <nav class="menu-departamentos">
    <ul>
      <li><a href="">DEPARTAMENTOS</a></li>
      <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="#">BLUSAS E CAMISAS</a></li>
      <li><a href="#">BOLSAS</a></li>
      <li><a href="#">ACESSÓRIOS</a></li>

    </ul>
  </nav>

  <p class="central"> </p>

</main>

<section id="destaques">
  <!-- Painéis com destaques -->
</section>

<footer>
  <!-- Conteúdo do rodapé -->
</footer>

.container {
margin-right: auto;
margin-left: auto;
}
.container {
margin: 0 auto;
width: 940px;
}
.container {
position: relative;
}
.menu-opcoes {
position: absolute;
bottom: 0;
right: 0;
}

.menu-cabecalho {
// código de um menu no cabeçalho
// essas regras TAMBÉM serão aplicadas ao nav
}
.sacola {
background-image: url(sacola1.png);
background-repeat: no-repeat;
text-color: white;
font-size: 14px;
text-align: right;
width: 140px;
height: 80px;
padding-right: 35px;
}
.sacola {
position: absolute;
top: 0;
right: 0;
}
.busca,.menu-departamentos {
float: left;
}
.menu-departamentos {
clear: left;
}
.menu-opcoes ul {
font-size: 15px;
}
.menu-opcoes ul li {
display: inline;
margin-left: 20px;
}
.sacola {
padding-top: 8px;
}
.menu-opcoes a {
color: #003366;
}

.central {
background-image: url(imagemcentral);
}

#2

i mano, não ficou claro o que vc quer fazer, é só posicionar a imagem no centro da página? Não vi essa imagem no código acima.

#3

Exato. O formulário de busca e o menu estão no lugar certo. Mas a imagem deve ficar no centro da página, indo até a extremidade direita.

#4

então, no seu código não tem essa imagem, só tem a logo dentro de um <h1>, é a logo?

#5

Bem, não está aí, mas já coloquei logo após o usando o img, não apareceu. Depois dei um nome class=“central” ao h1 efui pelo css e coloquei background-image = URL (imagemcentral). Também não funcionou. Quando ela aparece é sempre colada no fome busca e no menu departamentos

#6

Tá muito confusa sua resposta. Faça um rascunho no paint do que você quer e posta a imagem aqui que eu te ajudo.

#7

Como faço pra anexar a imagem do modelo da pagina aqui ???

#8

Daniel, nao sei como anexar a imagem aqui.

#9

ai bro, minha duvida é igual a do rapaz ai, acho que estamos usando a mesmo apostila e estou com o mesmo problema, até tentei resolver, ate consegui mover a foto dps de alterar a posição da classe departamentos, mas não ficou 100%. Estão estou deixando o link com o codigo e as imagens aqui (https://drive.google.com/drive/folders/1KlTSVBrBZdhjkYDc5pkT7f4qwhJ6PPbU?usp=sharing) caso você poder ajudar, agradeço.

att,

#10

ai man, consegui aqui. Seguinte, tive que definir o tamanho da imagem manualmente, foi um vacilo meu, pois na apostila esplicava.

então fica assim:

.banner-destaque,
.img {
width: 30px;
height: 30px;
}

#11

Lucas, manda teu e-mail aí pra gente ir se ajudando na construção desse projeto. Se puder, claro.

#12

Lucas, não consegui aqui não. Preciso de ajuda

#13

ta ai man awiikbrs@gmail.com

#14

Desculpa, fiquei off no fds. Se ainda precisar de ajuda meu e-mail é: danieldejesus8745@yahoo.com