CSS overflow em css para rolagem

[WilliamNascimento]

E minha gente estava montando um site na hora e fiz um rolagem com overflow em uma div , porém estou tentando entender o que eu fiz , pois estou tentando arrumar melhor agora e nao estou conseguindo . se alguem puder me ajudar vou deixar explicado abaixo.

 

Eu tenho este HTML e este css .

<section class = "pets"><!-- inicio pets-->
			<h2 class = "tittlePets">Pets</h2>
				<article class = "myPets">
					<nav class = "pets">
						<ul>
							<li class = "nav-item primeiro">
								<a href="yumi.html" class = "nav-div p1"></a>
								<p class = "tittlePets">Yumi</p>
								<button class = "btn-perfil" type="">Ver Perfil</button>
							</li>

							<li class = "nav-item">
								<a href="yumi.html" class = "nav-div p2"></a>
								<p class = "tittlePets">akeno</p>
								<button class = "btn-perfil" type="">Ver Perfil</button>
							</li>

							<li class = "nav-item">
								<a href="yumi.html" class = "nav-div p3"></a>
								<p class = "tittlePets">Tom</p>
								<button class = "btn-perfil" type="">Ver Perfil</button>
							</li>

							<li class = "nav-item">
								<a href="yumi.html" class = "nav-div p4"></a>
								<p class = "tittlePets">bruce</p>
								<button class = "btn-perfil" type="">Ver Perfil</button>
							</li>
						</ul>
					</nav>
				</article>
</section><!-- fim pets-->

 O css desta section :

	.tittlePets{
       text-align:center;
	}
	.pets{
      grid-area:pets;
      background: rgba(232,232,232,0.2);
      position: relative;
      overflow-x: scroll;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
 	}
 	.pets ul {
      display: flex;
  	}
  	.pets .primeiro{
      margin-left: 0px!important;
  	}
  	.pets li{
      margin-left:10px;
  	}
  	.p1{
      background-image: url(yumi.jpg);
      background-size: cover;
  	}
  	.p2{
  		background-image: url(rajado.jpg);
  		background-size: cover;
  	}
  	.p3{
  		background-image: url(tom2.jpg);
  		background-size: cover;
  	}
  	.p4{
  		background-image: url(foguinho.jpg);
  		background-size: cover;
  	}
  	.btn-perfil{
  		padding: 10px 5px;
  		background-color: rgba(255,250,250);
  		border-radius: 10px;
  		display: block;
  		width: 100%;
  		
  	}
  	.nav-div{
        display:block;
        font-family: nome;
        font-size: 2.0em;
        text-align: center;
        line-height: 200px;
        color:black;
        border-radius: 10px;
        height: 250px;
        width: 220px;
        background-color:black;
  	}

Enfim no html estou usando a classe pet na sessao sobre pets , ate ai tudo ok. Logo em seguida eu coloco o titulo e ate ai tudo ok , so que mais abaixo eu utilizo a classe novamente e ai que ta .

 

Se eu retirar a  classe da section , minha pagina toda fica com o overflow.

porém se eu tirar a classe da nav , meu titulo corre junto com com a div coisa que eu nao quero .

Porque retirando da section minha pagina toda fica com overflow ? e nao apenas a nav ??

e porque eu repeti a classe pets na ul que eu nao lembro ? Acho que foi uma gambiarra que agora nao me lembro .

 

Alguem poderia abrir minha cabeca com essa duvida ? E o que posso tentar fazer ?

[Adriano_web]

Fala William, beleza? Vamos a sua pergunta número um "Porque retirando da section minha pagina toda fica com overflow ? e nao apenas a nav ??". Então, quando você remove a classe "pets" de seu elemento <section> a página continua a mostrar uma barra de rolagem horizontal porque ela esta no elemento <nav> e não no <section>. 

 

Sua pergunta número dois é. "porque eu repeti a classe pets na ul que eu nao lembro ?" Não entendi essa pergunta, pois no exemplo mostrado o elemento <ul> permanece sem um atributo class. Se você avia colocado uma classe com o valor pets nesse <ul> para algum propósito, você certamente iria ter pensado em alguma finalidade.

 

Espero ter ajudado, caso ainda fique com dúvidas favor me responda que lhe ajudarei de prontidão. 

 

[WilliamNascimento]

23 minutos atrás, Adriano_web disse:

Fala William, beleza? Vamos a sua pergunta número um "Porque retirando da section minha pagina toda fica com overflow ? e nao apenas a nav ??". Então, quando você remove a classe "pets" de seu elemento <section> a página continua a mostrar uma barra de rolagem horizontal porque ela esta no elemento <nav> e não no <section>. 

 

Sua pergunta número dois é. "porque eu repeti a classe pets na ul que eu nao lembro ?" Não entendi essa pergunta, pois no exemplo mostrado o elemento <ul> permanece sem um atributo class. Se você avia colocado uma classe com o valor pets nesse <ul> para algum propósito, você certamente iria ter pensado em alguma finalidade.

 

Espero ter ajudado, caso ainda fique com dúvidas favor me responda que lhe ajudarei de prontidão. 

 

Mas como eu coloquei overflow apenas na nav e porque a pagina toda fica ?

Se eu deixar o overflow na section apenas a section fica e porque a nav nao ?