Why is the gutter padding not displaying in one of my Bootstrap webpage content block and how do I f-CodePudding

I have just started learning Bootstrap 5. I made a very simple webpage with basic blocks using the row/column guidelines on Bootstrap. One of these columns that I made is not displaying the gutter padding. The other columns are displaying the gutter padding to the left and right, but not the content1 column that consists of the two "posts". I am attaching my HTML and CSS code here.

Here is the webpage that I made in Bootstrap 5: Click Here to View

And I am attaching my CSS code here:

.header1 {
    background:#ededed;
    border-bottom:1px solid #ddd;
}
.content1 {
    padding:40px 0;
}
.post {
    background:#ffe6fa;
    margin-bottom:30px;
}
.sidebar1 {
    padding:40px 0;
}
#widget1, #widget2, #widget3 {
    background:rgb(233, 250, 205);
    padding:30px;
    margin-bottom:30px;
}
.footer1 {
    background:#000;
    color:#fff;
}

Can you please help me understand what did I do wrong in my code? Why is the Bootstrap gutter padding not displaying for the column with class "content1"?

Thank you so much.

CodePudding user response：

The thing is you are adding padding for content1 as padding: 40px 0; which makes the padding zero on both left and right of the content1. If you want to have some padding,

.content1{
   padding: 40px 10px;
}

will do the trick. And if you want to add some padding to .post classes as well, you can use,

.post{
   padding: 30px;
}

CodePudding user response：

Good work for getting into Bootstrap, it does make a lot of things very easy. There is a way for Bootstrap to do all the work and you get to shrink down your CSS file too.

blahblahblah{
 etc.etc.etc
}

... ^ done to add more to your page eventually adds up to a large file that needs to be loaded by each visitor. You could do it all by adding 3 characters only to your HTML.

You are adding a lot of CSS when Bootstrap will take care of it for you. In the same way that you can add rows and columns to your HTML to make a cool layout where all the CSS is pre-written, you can also add margins and padding to your HTML and the CSS is all automatic too. You've already been doing this by adding gutters (if you were also following the GetBootstrap info for those rather than adding your own).

The two items that require a gutter on their right hand side could just have a little margin on their right hand side, or the column they are housed in could have a little right-side padding.

So, padding in Bootstrap.

<div >
No padding

<p >
Max padding without adding CSS

<a >
No padding top

<h1 >
Max padding bottom

<img >
Padding left and right

<button >
Padding top and bottom

In Bootstrap we don't use left and right for some things, we use Start and End.

<nav >
Padding start (the left side of whatever is being padded)

<div >
Padding end (the right side of whatever is being padded)

^ That last one can be added to the parent div of your two boxes. Adding pe-2 to your HTML is better than brain-aching over custom CSS?

Everything above also applies to Margins, just swap the P to an M.

The main point is, especially with the layout of the page. Let Bootstrap do the work, adding more and more layout CSS often results in a negative.