2
respostas

Rodapé com largura maior do que o desejado

Meu CSS tá da seguinte forma:

.cabecalhoPrincipal .container {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.cabecalhoPrincipal-nav {
    display: flex;
}

.rodapePrincipal-patrocinadores .container {
  display: flex;
  justify-content: space-between;
}
.rodapePrincipal-patrocinadores-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 70%;
  margin-right: 5%;
}

.rodapePrincipal-contatoForm {
  width: 25%;
}

.rodapePrincipal-contatoForm-fieldset {
  display: flex;
}

.rodapePrincipal-navMap-list {
  display: flex;
  flex-flow: column wrap;
  /*flex-direction: column;
  flex-wrap: wrap;*/
  height: 255px;
}

.conteudoPrincipal-cursos {
  display: flex;
  flex-wrap: wrap;
}

.conteudoPrincipal-cursos-link {
  width: 23%;
  margin: 1%;
}

.conteudoPrincipal-cursos-link:nth-child(4n) {
  margin-right: 0;
}

.conteudoPrincipal-cursos-link:nth-child(4n+1) {
  margin-left: 0;
}

/*mobile*/
@media screen and (max-width: 768px) {
  .cabecalhoPrincipal-nav {
    flex-direction: column;
  }

  .cabecalhoPrincipal .container {
    flex-direction: column;
    align-items: initial;
    text-align: center;
  }

  .conteudoPrincipal-cursos {
    flex-direction: column;
  }

  .conteudoPrincipal-cursos-link {
    width: 100%;
  }

  .rodapePrincipal-navMap-list {
    height: auto;
  }

  .rodapePrincipal-patrocinadores .container {
    flex-direction: column;
    align-items: center;
  }

  .rodapePrincipal-patrocinadores-list {
    margin: 0;
    width: 100%;
  }

  .rodapePrincipal-contatoForm {
    width: 100%;
  }

  .rodapePrincipal-contatoForm-fieldset {
    justify-content: center;
  }
}

Eu repassei o vídeo algumas vezes e me parece idêntico ao mostrado durante a aula. Ainda assim, a visualização no browser me apresenta da seguinte forma: http://i.prntscr.com/7rL3C56CQXSaJEaV1zDIzw.png O texto não está centralizado tal como deveria, e mesmo aplicando text align no item nada muda. Além disso, a lista de patrocinadores, mesmo estando com 100% de largura, parece ocupar mais que isso, estendendo-se. Help?

2 respostas

A parte do body que contém o vídeo e as vantagens é ligeiramente maior que o tamanho da tela o que faz com que o site tenha uma barrinha de rolagem na horizontal também, por isso quando alinhados em relação ao espaço disponível eles ficam fora da área visível, mas quando você chegar na Aula 4 "Vantagens e Vídeo" e arrumar o css dessa parte, tudo se resolverá.

Eu também passei uns minutos olhando pro meu código até entender que era isso que estava acontecendo.

Tenha uma boa noite Dafany!!! Bons estudos!!! ;)))

Gracias, Alexandre! Mas temo que sua resposta esteja um pouco além da minha dúvida/problema. O que está criando essa barra horizontal são as imagens do rodapé, e não o vídeo nem o texto lateral. Estes estão nos conformes no que tange a largura da tela. O transborde ocorre mesmo com as imagens dos patrocinadores, como pode ser visto aqui: http://i.prntscr.com/Lh9ZhPa_R5uDarl-38ncEw.png e aqui http://i.prntscr.com/XoIt2k7bRmWMzZXhHkqX1g.png E acabei de finalizar o curso, nenhuma etapa ajudou nesse ponto, além disso, baixei o code do projeto completo e o problema segue da mesma forma.