Elements within navigation resize separately rather than together - html

Question

One of the biggest problems I have with navigation bars is that, whenever trying to put a logo in with a title, I always find that the image resizes itself to much smaller than the text sooner rather than later.
In the case below, I have a title at one end of the navigation/title bar and an image at the other end. When resizing or even on mobile devices, the image becomes very very small.
The html...
<div id="nav">
<p>Crowes</p>
<img src="pic.jpg" />
</div>
..and the CSS
#nav {
background-color: #7E0E0A;
box-shadow: 1px 1px 1px 1px black;
padding: 1%;
font-size: 5vh;
color: white;
font-weight: bold;
font-family: 'Pacifico';
overflow: auto;
width: 100%;
z-index: 1;
}
#nav p {
margin-left: 2%;
margin-top: 1%;
margin-bottom: 1%;
float: left;
color: white;
}
#nav img {
display: inline-block;
width: 6%;
vertical-align: middle;
float: right;
border-radius: 50%;
border: 2px solid white;
margin-right: 3%;
opacity: 0.7;
transition: all 0.2s ease;
}

Answer 1

It's not only just changing the size of the elements, it was also their positioning. It all had to be changed to ems rather than %.
(Nav-specific)
#nav {
background-color: #7E0E0A;
box-shadow: 1px 1px 1px 1px black;
font-size: 2.3em;
color: white;
font-weight: bold;
font-family: 'Pacifico';
overflow: auto;
width: 100%;
z-index: 1;
}
font-size to 2.3em.
(P-specific)
#nav p {
margin: 1.3em;
display: inline-block;
vertical-align: middle;
float: left;
color: white;
}
margin to 1.3em
(Img-specific)
#nav img {
display: inline-block;
height: 2.3em;
vertical-align: middle;
float: right;
border-radius: 50%;
border: 2px solid white;
margin: 1em;
opacity: 0.7;
transition: all 0.2s ease;
}
height to 2.3em, as guided by #MrLister and margin to 1em.