Good, this is my first question and I hope to do it well, I'm copying a web page to practice html and css, what happens to me is that when I try to put the background blue of page-section-2 actually it turns blue the page-section-1 and I have no idea what can if someone can help me is appreciated, if you do not understand the question my apologies and if they tell me how to improve is appreciated
html{
box-sizing: border-box;
}
*, *:before,*:after{
box-sizing: inherit;
}
body{
font-family: verdana, geneva, serif;
}
div.contenedor-body::after {
clear: both;
content: '';
display: block;
}
/*--------Contenedor principal-------------*/
.contenedor-body{
width: 1200px;/*80%*/
margin: 0 auto;
}
h2{
text-align:center;
}
h3{
text-align:center;
}
p{
text-align: center;
}
.material-icons{
font-size: 300%;
}
.material-icons{
text-align: center;
width: 100%;
margin:0 auto;
}
.page-section-2{
background-color: blue;
}
/*--------Contenedor principal-------------*/
@media only screen and (min-width: 768px){
/********PAGE SECTION 1*********/
.colum-1{
width:75%;
text-align: center;
padding-left: 364px ;/*24%*/
}
.colum-2, .colum-3, .colum-4{
width: 33.3%;
float:left;
padding-left: 15px%;/*15px*/
padding-right:15px%;/*15px*/
}
}
/**********PAGE SECTION 2********/
@media only screen and (min-width: 768px){
div.col-A{
width: 33.3%;
float: left;
padding-left: 15px%;
padding-right: 15px;
padding-bottom: 15px;
}
div.col-B{
width: 33.3%;
float: left;
padding-left: -0.5%;
padding-right: 15px;
height: 1px;
padding-bottom: 1px;/*60%*/
}
div.col-C{
width: 33.3%;
float: left;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 475px;/*15%*/
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cursos de Diseño Web - CSS</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stilos.css">
</head>
<body>
<div class="contenedor-body">
<div class="top-banner">
<!--PRIMERA SECCION DE LA PAGINA-->
<header>
<div class="navegacion">
<nav class="menu-principal">
<ul>
<li>
<a href="#">Inicio</a>
</li>
<li>
<a href="#">Empresa</a>
</li>
<li>
<a href="#">Servicios</a>
</li>
<li>
<a href="#">Productos</a>
</li>
<li>
<a href="#">Registro</a>
</li>
<li>
<a href="#">Contacto</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="page-section-1">
<div class="contenedor">
<div class="columnas">
<div class="colum-1">
<h2>PACIFIC ALIANCE CAPITAL</h2>
<p>Con la inclusión de nuevas tecnologías y productos de inversión, pretendemos contribuir al desarrollo de dichos mercados siendo líderes de la industria del Trading e Inversiones.</p>
</div>
<div class="colum-2">
<a href="#"><i class="material-icons">devices</i></a>
<h3>Acceso Mundial</h3>
<p>1-Acceda a datos de mercado 24 horas al día y seis días a la semana para estar en conexión con todos los mercados internacionales.</p>
</div>
<div class="colum-3">
<a href="#"><i class="material-icons">devices</i></a>
<h3>Acceso Mundial</h3>
<p>2-Acceda a datos de mercado 24 horas al día y seis días a la semana para estar en conexión con todos los mercados internacionales.</p>
</div>
<div class="colum-4">
<a href="#"><i class="material-icons">devices</i></a>
<h3>Acceso Mundial</h3>
<p>3-Acceda a datos de mercado 24 horas al día y seis días a la semana para estar en conexión con todos los mercados internacionales.</p>
</div>
</div>
</div>
</div>
<!--FIN DE LA PRIMERA SECCION DE LA PAGINA-->
<!--SEGUNDA SECCION SECCION DE LA PAGINA-->
<div class="page-section-2">
<div class="contenedor">
<div>
<h2>ASESORIAS A SU MEDIDA</h2>
<p>En Pacific Alliance Capital brindamos asesorías personalizadas, adaptándonos día a día a los cambios de los mercados financieros. Si quiere lograr que su cartera de inversiones tenga óptimos resultados no dude en consultarnos.</p>
</div>
<div class="col-A">
<div>
<a href="#"><i class="material-icons2"></i></a>
<h3>Informacion en tiempo real</h3>
<p>Analizamos los mercados para ofrecer las mejores opciones de negociación.</p>
</div>
<div>
<a href="#"><i class="material-icons2"></i></a>
<h3>Noticias y Analisis</h3>
<p>Obtenga acceso a la totalidad de nuestros datos e informes del mercado.</p>
</div>
</div>
<div class="col-B">
<img src="img/cellphone.jpg" alt="Imagen-de-aprobacion">
</div>
<div class="col-C">
<div>
<a href="#"><i class="material-icons2"></i></a>
<h3>Portafolio de Inversion</h3>
<p>Negocie con nuestra amplia gama de instrumentos en cualquier mercado que desee.</p>
</div>
<div>
<a href="#"><i class="material-icons2"></i></a>
<h3>Listo para comenzar</h3>
<p>Proporcionamos las mejores condiciones de trading, la mayor velocidad de ejecución que se adaptan a sus necesidades.</p>
</div>
</div>
</div>
</div>
<!--FIN DE LA SEGUNDA SECCION DE LA PAGINA-->
<!--Intermedio de la pagina-->
<div class="page-intermedio">
<div class=contenedor">
<div>
<p class="pacific">Pacific Aliance Capital | Una gran oportunidad para invertir</p>
</div>
</div>
</div>
<!--Intermedio de la pagina-->
<!--TERCERA SECCION DE LA PAGINA-->
<div class="page-section-3">
<div class="contenedor">
<div >
<h2>POR QUE ELEGIRNOS</h2>
<p>Le ofrecemos claridad, simplicidad y transparencia. Le ofrecemos formación y posibilidad de elegir Sus prioridades son nuestras prioridades. Y si necesita ayuda para cualquier cosa, estamos disponibles para ayudarle de inmediato. Trabajamos sin descanso para conseguir que sus operaciones le resulten más sencillas y ofrecerle una experiencia única al operar.</p>
<p>El principal componente de Pacific Alliance Capital son nuestros clientes y el enfoque en sus necesidades. Ofrecemos servicios de calidad, además de un trabajo continuo en la mejora de las tecnologías, que nos ayudan a mantenernos en una posición líder en asesorias de mercados financieros.</p>
<a href="#">Contactanos</a>
<a href="#">Registrate</a>
</div>
</div>
</div>
<!--FIN DE LA TERCERA SECCION DE LA PAGINA-->
<!--Intermedio de la pagina-->
<div class="page-intermedio-2">
<div class=contenedor">
<div>
<p>ACCEDE A MAS DE 10.000 INSTRUMENTOS SUBYACENTES</p>
</div>
</div>
</div>
<!--Fin de el Intermedio de la pagina-->
<!--Contacto-->
<div class="Contacto">
<div>
<div>
<textarea name="Mensaje" id="Mensaje" cols="30" rows="10" placeholder="Mensaje"></textarea>
</div>
<div>
<input type="text" name="Nombre" placeholder="Nombre">
<input type="text" name="Email" placeholder="Email">
<input type="text" name="Asunto" placeholder="Asunto">
<input type="submit" value="enviar">
</div>
</div>
</div>
</div>
<footer>
<p class="copyright">©Copyright2018 Pacific Aliance Capital | Todos los derechos reservados </p>
<div class="navegacion">
<nav class="menu-principal">
<ul>
<li>
<a href="#">Inicio</a>
</li>
<li>
<a href="#">Empresa</a>
</li>
<li>
<a href="#">Servicios</a>
</li>
<li>
<a href="#">Productos</a>
</li>
<li>
<a href="#">Registro</a>
</li>
<li>
<a href="#">Contacto</a>
</li>
</ul>
</nav>
</div>
</footer>
</div>
</body>
</html>