Cannot have 3 Elements float next to each other - html

Question

I got a small problem, I want to float 3 sections next to each other but for some reasons (using bootstrap class col-md-4) the 3rd section spills over to the next line when adding any margin-right, how can I fix this?
https://jsfiddle.net/rpu6szv0/ `
<section id="FirstSection" class="col-md-4 col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Chicken</h3>
dummy text
Back To top
</section>
<section id="SecondSection" class="col-md-4 col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Beef</h3>
dummy text
Back To top
</section>
<section id="ThirdSection" class="col-md-4 col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Sushi</h3>
dummy text
Back To top
</section>
</div>`
Zoomed Out 3 sections

Answer 1

I want to float 3 sections next to each other
A more advanced and more modern alternative to float is flexbox.
You can think of flexbox as float with superpowers.
Historical Note: The Twitter Bootstrap framework was launched in 2011, several years before CSS Flexbox was finalised.
It's true that Bootstrap made it easier to achieve certain layouts in CSS than approaches available in 2011.
But, as Wikipedia states:
In the 2010s, the intensive use of popular JavaScript layout
frameworks, such as Bootstrap, inspired CSS flex-box and grid layout specifications.
Source: https://en.wikipedia.org/wiki/CSS_Flexible_Box_Layout#History
Today, CSS Flexbox (and CSS Grid) make it even easier to achieve those layouts than Bootstrap does.
In the example below, I have:
given the parent (in this case, body) a display: flex
given the children (in this case, section) a flex: 1 1 33%
The second property is crucial.
flex is a shorthand property which indicates:
the rate at which the element may grow (in this case, 1)
the rate at which the element may shrink (in this case, 1)
the initial width (in this case, 33%)
This means, that, all else being equal, the element will take up 33% of the available space (in this case, the width of body) but if you add padding, borders, margins etc. the element can shrink, so that the row of elements doesn't end up taking up more than the available space.
Working Example:
body {
display: flex;
}
section {
flex: 1 1 33%;
text-align: center;
}
<section id="FirstSection">
<h3>Chicken</h3>
<p>dummy text</p>
<p>Back To Top</p>
</section>
<section id="SecondSection">
<h3>Beef</h3>
<p>dummy text</p>
<p>Back To Top</p>
</section>
<section id="ThirdSection">
<h3>Sushi</h3>
<p>dummy text</p>
<p>Back To Top</p>
</section>

Answer 2

The most effective solution is to keep col-md-3 for all sections and use offset-md-1 for spacing

Answer 3

from your comment
#G-Cyrillus That's the whole point, I'm trying to have some space between each section but it won't allow it, I think it barely fits to add a margin. Is there anyway around it?
if ad margin , the col-x classes sizing your columns should be dropped for a plain col class , which will grow inside the sroom left for it . Instead col-md-4 , you can use the class col-md for the second column, it will grow and shrink to fit in between the 2 others and allow you to add margins :
example
* {
box-sizing: border-box;
}
#FirstSection,
#SecondSection,
#ThirdSection {
font-size: 120%;
font-weight: bold;
background-color: #C0C0C0;
height: 1700px;
margin-right: 10px;
overflow: auto;
margin-left: auto;
padding: 10px;
clear: none;
}
.SectionHeader {
font-size: 1.5em;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<section id="FirstSection" class="col-md-4 col-sm-12 col-xs-12">
<h3 class="SectionHeader text-center">Chicken</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis
arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.
Back To top
</section>
<section id="SecondSection" class="col-md col-sm-12 col-xs-12">
<h3 class="SectionHeader text-center">Beef</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis
arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris.
Back To top
</section>
<section id="ThirdSection" class="col-md-4 col-sm-12 col-xs-12">
<h3 class="SectionHeader text-center">Sushi</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.
Back To top
</section>
</div>
</div>
see : https://getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns