I'm having trouble understanding why the margin-right value (positive or negative) is not affecting the tooltiptext in the program below. The margin-left seems to work fine, but for some reason, the margin-right has no impact. Any insights into this issue would be greatly appreciated. Thank you.
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
top: 100%;
margin-right: 100px;
}<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>