Couldn't understand div elements [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I have two div elements and nav > nav_1. I am expecting to see 500x500 black color background and 50x50 blue color area on the top left but instead of showing me only 500x500 black area. how could i fix it?
.nav {
height: 500px;
width: 500px;
background-color: black;
}
.nav.nav1 {
height: 50px;
width: 50px;
background-color: blue;
}
<div class="nav">
<div class="nav_1">
</div>
</div>

Answer 1

First of all in your CSS, you were using .nav1 instead of .nav_1. Secondly put a space between .nav and .nav_1. Try this:
.nav .nav_1{
height:50px;
width:50px;
background-color:blue;
}
Here is a Fiddle for the same.
EDIT:
For getting a margin-top of 50px, try this:
.nav{
height:500px;
width:500px;
background-color:black;
position:fixed; /* fix position of .nav div */
}
.nav .nav_1{
height:50px;
width:50px;
background-color:blue;
margin-top: 50px ; /* put margin-top to 50px */
}
Here is the Updated Fiddle for the same.