HTML text jumps out of DIV block - html

Question

I'm building a panel for a front end system, but I got an annoying problem.
I am not that good with CSS. This is what happens:
This is my HTML code:
#main #myTopMenu #iconBar {
margin-right: 10px;
float: right;
}
#main #myTopMenu #iconBar a {
display: inline-block;
margin-left: 30px;
color: white;
}
#main #myTopMenu #iconBar .optionsContainer {
line-height: 55px;
}
#main #myTopMenu #iconBar .optionsContainer img {
vertical-align: middle;
position: relative;
}
#main #myTopMenu #iconBar .valueWithOption {
background-color: #59a632;
height: 25px;
width: 35px;
position: absolute;
top: 10px;
margin-left: 27px;
border-radius: 4px;
}
#main #myTopMenu #iconBar .valueWithOption span {
background-color: blue;
width: 100%;
height: 100%;
}
<div id="iconBar">
<a href="#">
<div class="optionsContainer">
<img src="images/icons/message.png">
<div class="valueWithOption">
<span>5</span>
</div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/bell.png">
<div class="valueWithOption"><span>5</span></div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/settings.png"></div>
</a>
</div>
Also do you guys have tips to make it so that the width of the green box expands so that the value in the green box always fits properly.

Answer 1

I made some significant changes to your codes for expected results. See snippet
#iconBar {
margin-right: 10px;
float: right;
}
#iconBar a {
display: inline-block;
margin-left: 30px;
color: white;
}
#iconBar .optionsContainer img {
vertical-align: middle;
position: relative;
}
#iconBar .valueWithOption {
background-color: #59a632;
padding: 5px;
top: 10px;
border-radius: 4px;
position: relative;
top: -10px;
display:inline-block
}
#iconBar .valueWithOption span {
background-color: blue;
width: 100%;
height: 100%;
}
<br>
<br>
<div id="iconBar">
<a href="#">
<div class="optionsContainer">
<img src="images/icons/message.png">
<div class="valueWithOption">
<span>5</span>
</div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/bell.png">
<div class="valueWithOption"><span>500</span></div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/settings.png"></div>
</a>
</div>