Responsivo com ploblema!

Front-end
#1

Oi bom dia eu tentei fazer um site responsivo mais ele quando eu coloco na tela toda ele não preenche a mesma!

Captura de tela 2022-03-31 125107
Captura de tela 2022-03-31 1251071366×768 85.2 KB
comercio-eletronico
comercio-eletronico512×512 40.1 KB

index.html (590,Bytes)
normalize.css (6,8,KB)
style.css (359,Bytes)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
    <title>site teste</title>
</head>

<body>
    <header>
        <h1 class="logo">
            <img class="foto-logo " src="comercio-eletronico.png" alt="">
        </h1>
        <nav>


            <a href="">menu</a>

        </nav>

    </header>
</body>

</html>

header {
    background-color: #9eadab;
    position: fixed;
    align-items: center;
    display: flex;
    border-bottom: 1px solid black;
}

a {
    text-decoration: none;
    color: black;
    margin-left: 13%;
    margin-right: 19px;
    margin-bottom: 39%;
    font-size: 19px;
}

.foto-logo {
    width: 24%;
    margin-left: 19%;
}
#2

Como <header> é um elemento de bloco, ele deveria ocupar 100% da largura, mas como vc usou position:fixed ele se comporta diferente e sua largura depende do seu conteúdo.

Se quiser continuar com position:fixed basta colocar um width:100%.

Mas eu acho que vc deveria usar position:sticky ao invés de fixed.

#3

Aqui eu mudei o que você falou mais ai o menu não vai procanto da tela olha só que estranho!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
    <title>site teste</title>
</head>

<body>
    <header>
        <h1 class="logo">
            <img class="foto-logo " src="comercio-eletronico.png" alt="">
        </h1>
        <nav>


            <a href="">menu</a>

        </nav>

    </header>
</body>

</html>

    header {
    background-color: #9eadab;
    position: sticky;
    align-items: center;
    width: 100%;
    display: flex;
    border-bottom: 1px solid black;
}

a {
    text-decoration: none;
    color: black;
    margin-left: 0%;
    margin-right: 1em;
    margin-bottom: 39%;
    font-size: 19px;
}

.foto-logo {
    width: 24%;
    margin-left: 11%;
    margin-top: 0%;
    margin-bottom: 0%;
#4

Vc quer que a imagem fique colada no canto esquerdo e o menu colado no canto direito?

Se for isso mesmo, não estranho, é o comportamento normal. Se quiser que cada um fique colado num canto vc precisa especificar isso.

Como <header> é flex, vc pode usar o justify-content:space-between para isso.

header {
  background-color: #9eadab;
  position: sticky;
  display: flex;
  border-bottom: 1px solid black;
  justify-content: space-between;
}

Obs.: Quando vc usa position:sticky não precisa do width:100%.

#5

Agora entendi deu certo, obrigado cara!

1 curtida