Cristian Cordero
PreguntaAlguien sabe por que me deja ese espacio? llevo horas intentando arreglarlo y no he podido
aqui mi codigo:
HTML:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
<link rel=“stylesheet” href="./style.css">
</head>
<body>
<header>
<nav> <ul class="lista"> <li><a href="">Menu</a></li> <li><a href="">Contactanos</a></li> <li><a href="">Promociones</a></li> </ul> </nav> <figure class="logo"> <img src="logo_restaurante.jpg" alt="Logo del restaurante"> </figure> </header> <main> <section class="section"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </section> <section class="content"> <p class="parrafo"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt optio distinctio hic sequi natus non deserunt iste consequuntur repudiandae. Eligendi quasi qui, voluptatem nesciunt nihil illum. Dicta illo consequuntur vero. <figure class="restaurante"> <img src="restaurante.jpg" alt="Imagen de nuestro restaurante"> </figure> </p> </section> </main>
</body>
</html>
CSS:
- {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background-color: tomato;
font-family: Arial, Helvetica, sans-serif;
}
header {
height: 80px; width: 100vw; padding-bottom: 2px; width: 100%; background-color: rgb(0, 0, 0); display: block;
}
.logo img {
position: static; height: 50px; width: 50px;
}
nav .lista {
position: relative;
top: 2rem;
background-color: rgb(230, 139, 75);
font-size: 1.5rem;
border-radius: 10px; list-style: none; text-align:center; padding: 2rem; font-size: 1.5rem; float: right; display: inline-block;
}
.lista li {
display: inline-block; padding-right: 1rem; font-family: Verdana, Geneva, Tahoma, sans-serif; font-stretch: 0px;
}
a {
transition: background-color .5s;
}
a:hover {
background-color: rgb(184, 13, 13);
}
.restaurante {
position: relative;
top: 10%;
left: 50%;
float: center;
width: 80px;
height: 80px;
}
.restaurante img {
position: static;
text-align: center; width: 500px; height: 300px;
}
main {
height: 100vh;
position: relative;
}
.box {
width: 85%;
height: 21.2%;
background-color: #a283ec;
margin: 20px auto;
border-radius: 10px;
}
.content{
position: absolute;
left: 50%; right: 2rem; bottom: 2rem; background-color: chocolate; height: 100vh; position: absolute; display: inline; padding: 20px 0 0 15px;
}
.section {
position: relative; height: 100vh; width: 230px; background-color: #924011fc;
}
Carlos Muñoz
Ese espacio pertenece simplemente al body. Al segundo section le diste la clase de content y le diste un left: 50% por lo cual te deja ese espacio libre a la izquierda.
![Curso de HTML y CSS [Empieza Gratis]](https://static.platzi.com/media/achievements/badges-html-css-afa64acb-64a4-486d-96a5-f930fbb7ee32.png){kind=small}
![Curso de HTML y CSS [Empieza Gratis]](https://static.platzi.com/media/courses/Opengraph-definitivo-html-css2.png)