Why did my CSS widths suddenly stop working properly?

Question

Originally, the code worked as planned. The status bars were meant to fill the entire cell and sit right next to the green square. The green box will eventually be a character portrait picture. I tried to round the edges of the green square and as soon as I did, the status bars jumped over and became shorter than the previous 400px. I deleted the border-radius from the green square css, but the status bars didn't go back to their original size/position...

...any ideas?

 .header { width: 100%; margin: 0 auto; text-align: center; }.w3-light-grey w3-round-xlarge { width: 700px; } #chad { height: 100px; width: 100px; background-color: green; } iframe { height: 300px; width: 504px; border: none; }.button-col { width: 252px; }

 <table align="center"> <tr> <td align="right" colspan="2"> Welcome back, <?=$_SESSION['name']?>. <a href="profile.php"><i class="fas fa-user-circle"></i>Profile</a> | <a href="logout:php"><i class="fas fa-sign-out-alt"></i>Logout</a> </td> </tr> <tr> <td rowspan="3"> <div id="chad"></div> </td> <td> <div class="w3-light-grey w3-round-xlarge"> <div id="hp" class="w3-container w3-round-xlarge w3-red" style="width:100">100/100</div> </div> </td> </tr> <tr> <td> <div class="w3-light-grey w3-round-xlarge"> <div id="mp" class="w3-container w3-round-xlarge w3-blue" style="width:100">100/100</div> </div> </td> </tr> <tr> <td> <div class="w3-light-grey w3-round-xlarge"> <div id="xp" class="w3-container w3-round-xlarge w3-yellow" style="width:100">100/100</div> </div> </td> </tr>

Answer 1

Well...I feel silly...

just added units to the inline styles and the problem was fixed.