How do I get a better grasp of layout using only CSS - html

Question

h1, p {
font-family: futura; sans-serif;
margin: 20px 20px 0px 20px;
}
.section {
background-color: tomato;
padding: 50px;
margin: 0 auto;
}
.container {
background-color: white;
padding: 5px;
margin: 10px 20px;
text-align: center;
display: inline-block;
height: 250px;
}
<div class="section">
<div class="container">
<h1>This is a title</h1>
<p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
</div>
<div class="container">
<h1>This is another title</h1>
<p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
</div>
<div class="container">
<h1>This is a third title</h1>
<p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
</div>
</div>
I am trying to improve my ability to organize content with CSS. It's something I'm really struggling with and I've read a lot of different articles and watched all the videos but it's not clicking just yet. I would like to understand how to do so in a way that incorporates responsive design ideals in addition to not relying on flex box. Flexbox is the next step but I want to master this stage first.
I practiced adding styles to a simple three-card section of content. I was able to get to the point where I have the boxes lined up horizontally. Now there are a couple of issues.
The cards won't align on the same row unless I give a max width, which I'm not sure is best practice for responsive design.
The .container content won't center within the .section class. I've done 'margin: 0 auto;' but it won't affect it.
I've tried adding a relative position property to the .container class as well but that didn't seem to matter.
When I size the viewport to mobile view, the text spills over the bottom of the white container. How do I get the height of the container to adjust to the content within?

Answer 1

Try to use css flex features. Example:
h1, p {
font-family: futura; sans-serif;
margin: 20px 20px 0px 20px;
}
.section {
background-color: tomato;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container {
width:80%;
background-color: white;
text-align: center;
padding: 5px;
margin: 10px 20px;
}
<div class="section">
<div class="container">
<h1>This is a title</h1>
<p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
</div>
<div class="container">
<h1>This is another title</h1>
<p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
</div>
<div class="container">
<h1>This is a third title</h1>
<p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
</div>
</div>

Answer 2

Your query states that you want to learn style techniques prior to Flexbox, so I dug up an antique prototype that I built in 2011 following this tutorial by Christopher Schmitt http://christopher.org/css-floats-to-display-columns-in-any-order/, and I posted it as a Pen for you to see.
https://codepen.io/cwebba1/pen/agxMzQ
<div><p>Check it out Here</p></div>
I also put it here.
Christopher Schmitt's original tutorial is still up and he has a link to a book that he wrote. You can see from his tutorial that he uses floats, inline-blocks, and percentage widths for layout, and negative margins to control the order of content display on the page. I am in the midst of redesigning my webpage and I still use this pattern.
Also, when I first started learning CSS I found a small inexpensive book, CSS in Easy Steps. It will lead you through the Cascade and styling elements quickly.
As to your projet, I recomend using persentages to set widths, and then changing percentages and adding inline-block to wider media-query layouts.