I changed the styling method to a CSS-Grid.
1st: I removed the margin of your sections: section { margin: 20px; }.
2nd: I wrapped all the 3 sections inside a div: <div class="grid-wrapper"> ... </div>
3rd: I deleted all your CSS within the media queries.
4th: I added following CSS for the div.grid-wrapper outside of any media queries: .grid-wrapper { padding: 20px; display: grid; grid-gap: 20px; }. This will create a spacing to the border of the screen of 20px (acts the same as your previos 20px margin). The grid-gap will keep the sections always exactly 20px apart from each other no matter in which media queries view.
5th: I added following CSS for desktop view: .grid-wrapper { grid-template-columns: repeat(3, 1fr); }. This will divide the wrapper into 3 equal wide columns.
6th: I added following CSS for tablet view: .grid-wrapper { grid-template-columns: repeat(2, 1fr); } .section3 { grid-column: span 2; }. This will divide the wrapper into 2 equal wide columns. The last 3rd section will span both columns.
7th: I added following CSS for mobile view: .grid-wrapper { grid-template-columns: repeat(1, 1fr); }. This way it will only be a single column and all sections are dispalyed below each other.
/********* Base Styles ******/
* {
box-sizing: border-box;
}
h1 {
font-weight: bold;
text-align: center;
font-family: Comic Sans MS, Arial, cursive;
}
section {
background-color: gray;
}
div>p {
border: 1px solid black;
}
p {
text-align: center;
width: 25%;
margin-right: right;
margin-left: auto;
margin-top: auto;
}
#p1 {
background-color: pink;
}
#p2 {
background-color: maroon;
color: white;
}
#p3 {
background-color: yellow;
}
.grid-wrapper {
padding: 20px;
display: grid;
grid-gap: 20px;
}
/********* Desktop Devices Only *******/
@media only screen
and (min-width: 992px) {
.grid-wrapper {
grid-template-columns: repeat(3, 1fr);
}
}
/*********** Tablet Devices Only **********/
@media only screen
and (min-width: 768px)
and (max-width: 991px) {
.grid-wrapper {
grid-template-columns: repeat(2, 1fr);
}
#section3 {
grid-column: span 2;
}
}
/************* Mobile Devices Only **************/
@media only screen
and (max-width: 767px;) {
.grid-wrapper {
grid-template-columns: repeat(1, 1fr);
}
}
<h1>Our Menu</h1>
<div class="grid-wrapper">
<section id="section1" class="container">
<div class="row">
<div class="col-dk-4 col-mb-6">
<div>
<p id="p1">Chicken</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</section>
<section id="section2" class="container">
<div class="row">
<div class="col-dk-4 col-mb-6">
<div>
<p id="p2">Beef</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</section>
<section id="section3" class="container">
<div class="row">
<div class="col-dk-4 col-mb-6">
<div>
<p id="p3">Sushi</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</section>
</div>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
