O que fazer quando o CSS sai fora de estrutura do navegador? de maneira MUITO INESPERADA

Front-end
, ,
#1

Oi gente, eu estou aqui tentando fazer um site pro curso, moldando o css dele como deveria ser feito, só que tem um problema. Fiz todo o modelo do curso, só que o css saiu de lugar totalmente, ficou todo destruturado, as coisas fora de lugar e eu não sei o que fazer pra resolver, não é a primeira vez que tento fazer um html e css na minha maquina e gera essa bagunça, alguém sabe se tem alguma configuração que podemos fazer para resolver?

Como por exemplo o “A vista no pix” deveria ta dentro desse card, esse texto fora do lugar, não foi assim que foi montado e o pior que cada modificação prejudica a estrutura do site todo

Código no git hub

Erro
Erro1840×597 74.1 KB

#2

Você copiou os arquivos css e html do curso e tentou rodar em casa, em outro PC, ou está digitando tudo de novo do zero? Não seu que curso você está fazendo, mas uma ferramenta importante para esse tipo de coisa são as ferramentas de desenvolvedor dos navegadores, que permite inspecionar elementos e ver quais regras de css estão sendo aplicadas (referência: usando devtools chrome - Google Search ).

É difícil deduzir o problema só olhando essas imagens. Se não forem muito longos, pode postar o código html e o css que está tentando fazer? (não esqueça de usar o botão </> no código copiado)

Outra opção é postar o html e o css em um site como jsfiddle , usar o botão Save no topo, e copiar a url gerada pra cá.

Abraço.

#3

GitHub - insany-boy/angular-curso aqui ta o link do git hub, mas vou colocar o código do html
e o css, lembrando que ele n ta identificando todos os códigos do css

Html

<section class="product-list">
   <div class="product-list__card" *ngFor="let produto of produtos">
      <br>
      <a routerLink="/produtos{{produto.id}}" class="product-list__link">
        <img [src]="produto.imagem">
        <h2 class="product-item__name">
            {{ produto.descricao }}
        </h2>
        <p class="product-item__price"></p>
           {{ produto.preco | currency: "BRL"}}
      </a>
      <p class="product-item_price-description">
        {{ produto.descricaoPreco}}
      </p>
      <button class="product-item__buy-button" type="button">Comprar</button>
      <br>
   </div>
</section>

Css

.product-list {
    padding: 40px 0;
    width: fit-content;    
    display: flex;
    gap: 20px;
    flex-flow: row wrap;  
    justify-content: space-evenly;
    align-content: center;  
}

.product-list__card {
    box-sizing: border-box;
    padding: 10px;
    border-radius: 4px;
    flex: 0 1 270px;
    height: 450px;
    background-color: white;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;       
}

.product-list__card:hover {
    outline: 1px solid var(--blue);
    transform: scale(1.1, 1.1);
    cursor: pointer;
}

.product-list__link {
    display: flex;
    flex-direction: column;    
    align-items: center;
    row-gap: 10px; 
    text-decoration: none;
}

.product-list__card img {
    height: 250px;
    width: 250px;    
    display: block;
    border-radius: 4px;
}

.product-item__name {
    font-size: 24px;
    color: var(--blue);
}

.product-item__price {
    color: var(--orange);
    font-size: 32px;
    font-weight: bold;
}

.product-item__price-deion {
    color: var(--gray);
    font-size: 12px;
    font-weight: bold;
}

.product-item__buy-button {
    background-color: var(--blue);
    border: none;
    color: white;
    font-size: 20px;
    padding: 6px 12px;
}

.product-item__buy-button:hover {
    filter: brightness(1.1);
    cursor: pointer;
}

Cabeçalho `<header class="main-header">
    <h1 class="main-header__title">
        <span class="main-header__title--blue">ProWay</span><span class="main-header__title--orange">Computers</span>
    </h1>
    <div class="container-menu">
        <nav class="main-header__menu">
            <ul>
                <li>
                    <a routerLink="produtos">Produtos</a>
                </li>
                <li>
                    <a routerLink="carrinho">
                        <i class="fa-solid fa-cart-shopping"></i>
                        Carrinho
                        <span class="badge-carrinho">{{ carrinhoService.obtemCarrinho().length }}</span>
                    </a>
                </li>
                <li><a routerLink="contato">Contato</a></li>
                <li><a><i class="fa-brands fa-facebook-f"></i></a></li>
                <li><a><i class="fa-brands fa-instagram"></i></a></li>
                <li><a><i class="fa-brands fa-twitter"></i></a></li>
                <li><a><i class="fa-brands fa-linkedin-in"></i></a></li>
            </ul>
        </nav>
        <app-barra-pesquisa></app-barra-pesquisa>
    </div>
</header>`