Tell us what’s happening:
i can’t modify my sections, when i type somenthing, it doesn’t appear nothing, and when i try to modify the margin of the sections, its affects the header
Your code so far
<!-- file: index.html -->
<!DOCTYPE html >
<html>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<title>MOMCOZY landing page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id=header>
<div class="logo-container">
<img id="header-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtsJyr33E6Hy5YHKWM5bOFCAkt9FRpS1P44nJwpH9mfoEaxweFHJrL4YFXHO0kj50qFRI&usqp=CAU" alt="logo">
</div>
<div class="page_title">
<h1>ACUNARTE</h1>
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#caracteristicas">Caracteristicas</a></li>
<li><a class="nav-link" href="funcion">Funcion</a></li>
<li><a class="nav-link" href="precio">Precio</a></li>
</ul>
</nav>
</header>
<main>
<section class="email-form">
<h2>Todo para su lactancia<h2>
</section>
<section class="caracteristicas"><h2>Todo para su lactancia<h2></section>
<section class="funcion"></section>
<section class="precio"></section>
</main>
</body>
</html>
/* file: styles.css */
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
body{
background-color: white;
font-family: "Roboto", sans-serif;
}
#header {
display: flex;
width: 100vw;
height: 130px;
background-color: pink;
justify-content: space-around;
align-items: center;
position: fixed;
}
.logo-container img{
height: 100%;
width: auto;
object-fit:cover;
}
#nav-bar li {
display: inline-block;
}
#nav-bar li a {
text-decoration: none;
}
main {
margin: 20rem;
padding: 5px
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page