Resizing image in HTML and keep CSS absolute right - html

Question

I've got another question that I'm having trouble finding out the answer. I have a profile image that is huge, and I want to put a scaled down version of this picture in the top right of my navbar (similar to how StackOverflow has)
I'm running into a problem. It seems as though when I resize the image in the HTML code, the image no longer "obeys" the CSS rule to be at the absolute position, right 0%. Why is this?
Codepin: https://codepen.io/dansbyt/pen/bGpaPRj
CSS & HTML in question:
.profile{
position: absolute;
top: 15%;
right: 0%;}
.navbar{
top: 0;
left: 0;
width: 100%;
height: 56px;
z-index: 10;
position: fixed;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
.profile img{float:right}
<div class="navbar">
<div class="profile">
<img src="http://mrdansby.com/Resources/ProfilePics/default.png" style="width:4%;border-radius: 50%">
</div>
</div>

Answer 1

according to your implementation, you have to define the image width exact measurements not like 4%, for example try changing this 4% to 40px and test it should work fine

Answer 2

CSS is superior against HTML, so if you set attribute height/width in html like
<img src="..." width="150">
And then use CSS
img {
width: 300px;
}
The image will be 300px and html attribute will be ignored.
You shouldn't mix inline CSS with external CSS, if not necessary (for example while css is generated via back-end (PHP), background images etc.)
Your problem is, that you are not positioning image as well, but his wrapper -> .profile
You should rewrite
.profile { position: absolute; top: 15%; right: 0%;}
to
.profile img{ position: absolute; top: 15%; right: 0%;}

Answer 3

Position absolute is not going to respect the parent size anymore.
absolute The element is removed from the normal document flow, and no
space is created for the element in the page layout. It is positioned
relative to its closest positioned ancestor, if any; otherwise, it is
placed relative to the initial containing block. Its final position is
determined by the values of top, right, bottom, and left. This value
creates a new stacking context when the value of z-index is not auto.
The margins of absolutely positioned boxes do not collapse with other
margins.
More info: Position info
I reworked on your codepen to fit with your expectation, but I will recommand to not use it as it is not flexible / responsive. I would recommand you to use bootstrap for this kind of element which is doing a great job.
Bootstrap 4
Bootstrap 4 navbar
body{
margin:0;
padding-top: 60px;
}
a.logo, a.logo img{
height: 100%;
}
a.logo{
display: inline-block;
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.nav-container{
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.money{
/*position: absolute;
top: 15%;
right: 6%;*/
margin-right:30px;
font-family: 'Noto Sans JP', sans-serif;
font-size: x-large;
color: white;
}
.profile{
}
img.profile {
float:right;
}
.navbar{
top: 0;
left: 0;
width: 100%;
height: 56px;
z-index: 10;
position: fixed;
background-color: #5B7042;
border-bottom: 4px solid #3F5328;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navbar_links{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
list-style: none;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin: auto auto auto 0;
}
.navbar_links a{
padding: 1% 1%;
display: block;
float: left;
font-family: 'Noto Sans JP', sans-serif;
font-size: x-large;
text-decoration: none;
color: white;
}
.navbar_links2{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar_links a:hover {background-color: #3F5328}
.navbar_links span{position:relative; bottom:5px}
.navbar_links2 a{
width:40px;
display:block;
}
.navbar_links2 a img{
max-width: 100%;
border-radius: 50%;
}
<div class="navbar">
<a class="logo" href="../index.php"><img src="http://mrdansby.com/Resources/logo.png" style="width:auto;"></a>
<div class="nav-container">
<ul class="navbar_links">
<li>
<img style="width:30%" src="http://mrdansby.com/projects/i_house.png"><span> Dash</span>
</li>
</ul>
<div class="navbar_links2" style="margin-right:0;">
<div class="money">$100</div>
<img class="profile" src="http://mrdansby.com/Resources/ProfilePics/default.png">
</div>
</div>
</div>