Quiero dividir mi página HTML en 4 secciones verticales diferentes.
Quiero que cada sección tenga un color de fondo diferente, para eso usé div pero cada color de fondo no cubre los lados de cada sección.
** El resultado final de mi aspiración: no quiero ver el color rojo del color de fondo del cuerpo en el html.
body { background-color: red; } .intro { background-color: #674AB3; } .edu { background-color: #A348A6; } .Skills { background-color: #9F63C4; } .end { background-color: #9075D8; } <div class="intro"> <hr> </div> <div class="edu"> <hr> </div> <div class="Skills"> <hr> </div> <div class="end"> <hr> </div>margin: 0 para el cuerpo, tiene un margen predeterminado.<hr> en 0.25vh (altura vertical). body { background-color: red; margin: 0; } .intro { background-color: #674AB3; height: 25vh; } .edu { background-color: #A348A6; height: 25vh; } .Skills { background-color: #9F63C4; height: 25vh; } .end { background-color: #9075D8; height: 25vh; } hr { margin: 0; } <div class="intro"> <hr/> </div> <div class="edu"> <hr/> </div> <div class="Skills"> <hr/> </div> <div class="end"> <hr/> </div> .flex-container { display: flex; justify-content: center; align-items: center; } .flex-container>div { margin:30px; } .flex-container hr { width: 100px; height: 100px; padding: 5px; margin: 10px; border-color: #FFF; box-shadow: none; border-width: 5px; } .intro { background-color: #674AB3; } .edu { background-color: #A348A6; } .Skills { background-color: #9F63C4; } .end { background-color: #9075D8; } <div class="flex-container"> <div class="intro"><hr></div> <div class="edu"><hr></div> <div class="Skills"><hr></div> <div class="end"><hr></div> </div>¡Podrías intentar usar grid ! también podría hacerlo receptivo: D
Esto es tener 4 secciones colocadas una al lado de la otra, para que se apilen en la dirección vertical, cambie:
grid-template-columns: repeat(4, 1fr);para:
grid-template-rows: repeat(4, 1fr); * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #00000000; /* transparent color */ display: grid; grid-template-columns: repeat(4, 1fr); /* 4 vertical sections */ height: 100vh; margin: auto; } .intro { background-color: #674AB3; } .edu { background-color: #A348A6; } .Skills { background-color: #9F63C4; } .end { background-color: #9075D8; } <div class="intro"> <p>intro</p> </div> <div class="edu"> <p>edu</p> </div> <div class="Skills"> <p>Skills</p> </div> <div class="end"> <p>end</p> </div>