Your code structure could be improved by following a more organized layout. I recommend exploring resources like w3 to learn about float, clearfix, or flexbox layouts before proceeding further with your coding.
Here's a simple vanilla method to display three columns in a row. You can incorporate media queries to ensure the sections resize properly.
Your CSS seems to be extensive and includes Bootstrap classes without having it imported. It appears that your CSS is interacting strangely with these classes. It's quite puzzling! Hopefully, this guidance helps clarify things for you!
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
section {
width:31.33%;
float:left;
margin-right:1%;
}
<body>
<header>
<h1>Our menu</h1>
</header>
<div class="clearfix">
<section class="1">
<h2 class="loremab1">lorem 1</h2>
<p class="p1">Lorem ipsum dolor sit amet... (content continues) ...anim id est laborum.
</p>
</section>
<section class="2">
<h2 class="loremab2">lorem 2</h2>
<p class="p2">Lorem ipsum dolor sit amet... (content continues) ...anim id est laborum.
</p>
</section>
<section class="3">
<h2 class="loremab3">lorem 3</h2>
<p class="p3">Lorem ipsum dolor sit amet... (content continues) ...anim id est laborum.
</p>
</section>
</div>
</body>