Need some assistance with styling in this situation. I have a table set up within a parent div, but it's not displaying properly. When I move the table outside of the parent div, it works fine. Here is the code:
<div class="culture" style=" display: none;">
<div style=" background-color: #373a36;">
<h2 style=" color: #fff; text-align: center;">TARGETS</h2>
</div>
<div style=" width: 30%; background-color: #d6d2c4;">
<h3 style=" text-align: center; padding-top: 10px;">BY 31DECEMBER 2016</h3>
<div style=" padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: center;">
<p>Content goes here</p>
</div>
</div>
<div style=" width: 30%; background-color: #f3f1ed; float: left;">
<h3 style=" text-align: center; padding-top: 10px;">BY 31 DECEMBER 2017</h3>
<div style=" padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: center;">
<p>Content goes here</p>
</div>
</div>
<div style=" width: 30%; background-color: #d6d2c4; float: left;">
<h3 style=" text-align: center; padding-top: 10px;">FROM 2018 TO 2020</h3>
<div style=" padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: center;">
<p>Content goes here</p>
</div>
</div>
If you have any suggestions on how to fix this issue, please let me know!