Edit
Os problemas dos espaços sobrando a direita do site eu corrigi fazendo um overflow-x:hidden
no html e body, e depois colocando box-sizing:border-box
nos elementos coma a class .aos-item
para o padding deles não interferirem no layout.
html, body {
overflow-x: hidden;
}
.aos-item {
display: inline-block;
float: left;
width: 50%;
height: 300px;
box-sizing: border-box;
padding: 20px;
}
Pelo que eu vi esses CSS deve resolver o problema do alinhamento e do tamanho da logo.
OBS: Vc vai ter que fazer outras variações de media quary @media
para tratar a altura da UL em algumas larguras de tela .cycle-slideshow .logo-atividades .atividades
Deixe a observação no código abaixo.
.cycle-slideshow .logo-atividades {
position: absolute;
top: 0;
left: 50%;
max-width: 500px;
height: 305px;
text-align: center;
overflow: hidden;
z-index: 999;
transform: translateX(-50%);
}
.cycle-slideshow .logo-atividades .atividades {
position: absolute;
top: 20%; /* aqui vc controla a altura da UL de acordo com a largura da tela*/
width: 100%;
height: 115px;
overflow: hidden;
pointer-events: none;
text-align: center;
z-index: 10;
color: #FFF;
}
Agora sobre o espaço que vai sobrando do lado direito é devido a esse JS que vc usou nas suas <sections>
, tanto que depois que vc colocar esse CSS acima e remover as sections
vc vai ver que o bug some
Esse elementos com a classe AOS que vem entrando da direita e esquerda data-aos="fade-right"
acredito que estejam bugando a largura da tela e dando o epaso branco no topo, retire eles e o bug some tb...