JSFiddle - React, Tailwind, and code Playground

HTML

<div class="x-outer">
<div id="x-inner" >
inner div
</div>
</div>
<div style="clear:both"></div>
<p id="results">
</p>
<p>Should the result really be 0px here?</p>

CSS

p{padding-top:10px;}

.x-outer{
    border:1px solid red;
    width:200px;
    float:left;
}
#x-inner{
    width: 100px; 
    display: block;
    border:1px solid blue;
    margin: 0px auto;
}
strong{font-weight:700;color:red;}

JavaScript

document.getElementById('results').innerHTML = window.getComputedStyle(document.getElementById('x-inner'),null).marginRight;