第三& ltdiv & gt在三列之間添加邊距時，or列會換行。我無法在不打亂布局的情況下添加頁邊距。

我嘗試過增加頁邊空白，調整框的大小:邊框，并使用百分比來表示值，但是沒有成功。

這是我得到的結果: 大屏幕:

中等屏幕:

這是我期待的結果: 大屏幕:

中等屏幕:

/*For responsive layout*/
.container{
    padding-left: 20px;
    padding-right: 20px;

    
}
.row{
    width: 100%;
    
}

/**For Large Devices**/
@media (min-width: 992px) {
   
    .col-lg-4{
        float: left;
        width: 33.33%;
    }
}

    

/*for medium devices*/

@media(min-width:768px) and (max-width:  991px){
    
    .col-md-6, .col-md-12{
        float: left;

    
    }
    
    .col-md-6{
        width: 50%;
    }

    .col-md-12{
        width: 100%;
    }

}

*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
 
}


h1{
    text-align: center;
    margin: 2%;
   
}

div .title{
    float: right;
    margin-top: 0px;
    margin-right: 0px;
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
    background-color: rgb(255, 123, 0);
    border: 1px solid black;
    font-size: x-large;

}
#beef{
    color: aliceblue;
}

.section{


    background-color: grey;
    margin-top: 20px;
    border: 1px solid black;
 
    
    
}

p{
    padding: 10px;
    clear: right;
    text-align: left;
    margin: 2%;
}

請幫幫忙！

要在不使用flexbox的情況下實現均勻間隔的響應div，可以利用CSS Grid。下面是一個如何修改代碼以獲得預期結果的示例:

padding-left: 20px;
  padding-right: 20px;
}

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px; /* Adjust the gap as needed */
}

.col-lg-4 {
  /* No changes required for large devices */
}

/*