Recently, I've started delving into the world of CSS and have encountered a small issue that's giving me trouble. Even though it seems simple, my lack of experience makes it challenging.
The HTML structure I'm working with is as follows:
<header>
<nav>
<div>Inicio</div>
<div>Secciones</div>
<div>Contacto</div>
</nav>
</header>
I envision styling it to look like this image: https://i.sstatic.net/b5W7f.jpg
My challenge lies in applying styles specifically to the div elements within the nav tag without altering the HTML code itself. I tried targeting only the child tags of the nav element using various selectors from resources like w3school, but haven't found one that works. Any suggestions?
Below is the current style applied to the header section, which unfortunately affects all divs when I only want it for those inside the nav tag:
header {
background-image: url("banner.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 170px;
width: auto;
}
nav {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
div{
display: inline;
}