There are two div elements on my webpage, both assigned the "nav" class.
Below is the CSS code:
.nav {
border-radius: 1em;
background-color: #0000BB;
color: white;
padding: 1em;
position: absolute;//Fits size to content.
margin: 1em;
left: 50%;
transform: translate(-50%);
display: block
}
I expect these two divs with the same styling to be displayed one after another in the order they are placed in the HTML document. However, they seem to be overlapping each other instead of appearing as intended. Shouldn't setting the "display: block" property prevent this from happening?
UPDATE: Changed CSS selector from ID to class.