css3 nav height does not change - html

Question

made a menu like this:
nav
{
margin: 20px;
background-color:pink;
border: 2px solid black;
}
nav a
{
margin:10px;
text-decoration:none;
font-weight:bold;
background-color:red;
border: solid 1px;
background-color:black;
color:Yellow;
padding:10px 30px;
border-radius: 15px;
display:inline-block;
}
<nav >
HTML
CSS
JavaScript
jQuery
</nav>
The problem is no matter what I set the nav height, still it will display very narrow like 50px so menu items display outside of nav.
I am using google Chrome.
Final verdict: OK I got a working solution but no idea why display:inline-block for anchors fixed it.
Looks like setting margin for inline anchors did not have any effects.

Answer 1

Your CSS is broken:
border: 2px solid black /* you forgot the closing ; here */
height:150px;
Therefore the height rule on the next line is not being parsed, causing it to size to its inline content elements.

Answer 2

add display:inline-block; to the nav a selector:
also, the height and width of the nav or unnecessary, as they are set automatically by its content
nav
{
margin: 20px;
background-color:pink;
border: 2px solid black;
}
nav a
{
margin:10px;
text-decoration:none;
font-weight:bold
background-color:red;
border: solid 1px;
background-color:black;
color:Yellow;
padding:10px 30px;
border-radius: 15px;
display:inline-block;
}
<nav >
HTML
CSS
JavaScript
jQuery
</nav>