Why has my nav element 100% width? - html

Question

This is my nav:
a{
text-decoration:none;
color:black;
}
nav{
display:inline;
margin:auto;
margin-bottom:0;
padding:0;
background-color:white;
border: 1px solid white;
border-radius:12px;
}
nav > ul{
list-style-type:none;
display:inline;
}
nav > ul > li{
display:inline;
font-size: 20px;
font-weight: 200;
border:2px solid transparent;
border-bottom: 2px solid #078930;
margin-right:2%;
}
<nav>
<img src='http://www.gymnasium-allermoehe.de/Bilder/Frankreich/Flagge.jpg' style='width:75px;height:50px;border-radius:12px 0px 0px 12px;'>
<ul>
<li class='info'><a href='http://manuel03.bplaced.net/guyane/index.html'>Info</a></li>
<li class='nature'><a href='http://manuel03.bplaced.net/guyane/nature.html'>Nature</a></li>
<li class='cayenne'><a href='http://manuel03.bplaced.net/guyane/cayenne.html'>Cayenne</a></li>
<li class='kourou'><a href='http://manuel03.bplaced.net/guyane/kourou.html'>Kourou</a></li>
</ul>
<img src='http://paradiseintheworld.com/wp-content/uploads/2012/02/french-guiana-flag.png' style='width:75px;height:50px;border-radius:0px 12px 12px 0px;'>
</nav>
The problem is that the nav has always 100% width of it's parent tag.
I cant specify a width, because I work with percent and images.
So what can I do that the nav takes only the space it needs?
The ul is has a lower height than the images.

Answer 1

As you mentioned in comments, I suppose you're trying to vertically align middle img and ul elments. If so, you should add vertical-align: middle; to those elements, like so:
a{
text-decoration:none;
color:black;
}
nav{
display:inline;
margin:auto;
margin-bottom:0;
padding:0;
background-color:white;
border: 1px solid white;
border-radius:12px;
}
nav img {
vertical-align: middle;
}
nav > ul{
list-style-type:none;
display:inline;
vertical-align: middle;
}
nav > ul > li{
display:inline;
font-size: 20px;
font-weight: 200;
border:2px solid transparent;
border-bottom: 2px solid #078930;
margin-right:2%;
}
<nav>
<img src='http://www.gymnasium-allermoehe.de/Bilder/Frankreich/Flagge.jpg' style='width:75px;height:50px;border-radius:12px 0px 0px 12px;'>
<ul>
<li class='info'><a href='http://manuel03.bplaced.net/guyane/index.html'>Info</a></li>
<li class='nature'><a href='http://manuel03.bplaced.net/guyane/nature.html'>Nature</a></li>
<li class='cayenne'><a href='http://manuel03.bplaced.net/guyane/cayenne.html'>Cayenne</a></li>
<li class='kourou'><a href='http://manuel03.bplaced.net/guyane/kourou.html'>Kourou</a></li>
</ul>
<img src='http://paradiseintheworld.com/wp-content/uploads/2012/02/french-guiana-flag.png' style='width:75px;height:50px;border-radius:0px 12px 12px 0px;'>
</nav>

Answer 2

Why not simply use Flexbox...use inline-flex for the nav and flex for the ul
a {
text-decoration: none;
color: black;
}
nav {
display: inline-flex;
margin: auto;
margin-bottom: 0;
padding: 0;
background-color: white;
border: 1px solid white;
border-radius: 12px;
}
nav>ul {
list-style-type: none;
display: flex;
padding: 0;
margin: 0;
align-items: center;
background: #efefef;
}
nav>ul>li {
font-size: 20px;
font-weight: 200;
border: 2px solid transparent;
border-bottom: 2px solid #078930;
margin: 0 5px;
}
<nav>
<img src='http://www.gymnasium-allermoehe.de/Bilder/Frankreich/Flagge.jpg' style='width:75px;height:50px;border-radius:12px 0px 0px 12px;'>
<ul>
<li class='info'><a href='http://manuel03.bplaced.net/guyane/index.html'>Info</a></li>
<li class='nature'><a href='http://manuel03.bplaced.net/guyane/nature.html'>Nature</a></li>
<li class='cayenne'><a href='http://manuel03.bplaced.net/guyane/cayenne.html'>Cayenne</a></li>
<li class='kourou'><a href='http://manuel03.bplaced.net/guyane/kourou.html'>Kourou</a></li>
</ul>
<img src='http://paradiseintheworld.com/wp-content/uploads/2012/02/french-guiana-flag.png' style='width:75px;height:50px;border-radius:0px 12px 12px 0px;'>
</nav>