Check out this demo link
Is there a way to center all the divs and paragraphs under the main div without specifying a fixed width value? I want to remove the 300px width in the .center class and have all the elements align center. Specifically, how can I make the divs and paragraphs above .tblInsideHere appear more centered, while ensuring that the width is consistent? Additionally, I want tblInsideHere to start further to the left and end further to the right compared to the previous div/p elements. Any suggestions on how to achieve this alignment?
CSS:
.main {
background-color:green;
width: 400px;
margin: 0 auto;
}
.center {
margin: 0 auto;
background-color:pink
}
.tblInsideHere > div {
float: left;
}
HTML:
<div class="main">
<div class="center">
blah
<span> blah text</span>
<span> blah text</span>
</div>
<p class="center">
blah
<span> blah text</span>
<span> blah text</span>
</p>
<div class="tblInsideHere center">
<div>blah text blah text</div>
<div>blah text blah text</div>
</div>
</div>