What should I do to get my boxes horizontally aligned? [duplicate] - html

Question

This question already has answers here:
How to float 3 divs side by side using CSS?
(16 answers)
Closed 2 years ago.
I tried doing the style="display: inline-block" on each div but it doesn't work. Please help.
Here's my HTML:
<div class="hobby" style="display: inline-block">
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" src="coding.jpg" />
<div class="card-body">
<h3>Coding</h3>
<p class="card-text">This is my primary hobby. That's why I was able to create a lot of projects.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hobby" style="display: inline-block">
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" src="guitar.jpg" />
<div class="card-body">
<h3>Guitar</h3>
<p class="card-text">I love music. And one way I appreciate it is by playing guitar.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hobby" style="display: inline-block">
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" src="coding.jpg" />
<div class="card-body">
<h3>Mandarin</h3>
<p class="card-text">I learn Mandarin Chinese. I really like this language because of its intonation.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- hobby div -->

Answer 1

just wrap your code into parent div like this .
<div style="display:flex">
// your current code
</div>

Answer 2

Your current use of style="display: inline-block" seems to work for me.
Perhaps you should check the margins and padding on your elements to make sure there is enough room to fit them side-by-side.
<div class="hobby" style="display: inline-block">
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<div style="width:100px;height:100px;background-color:gray"></div>
<div class="card-body">
<h3>Coding</h3>
<p class="card-text">This is my primary hobby..</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hobby" style="display: inline-block">
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<div style="width:100px;height:100px;background-color:gray"></div>
<div class="card-body">
<h3>Guitar</h3>
<p class="card-text">I love music.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hobby" style="display: inline-block">
<div class="album py-5 bg-light">

Answer 3

Give the style in a parent div.
<div class="parent-div>
<div class="child-div>
</div>
<div class="child-div>
</div>
<div class="child-div>
</div>
</div>
Try either:
.parent-div {
display: inline-block;
}
.child-div {
width: 33%;
height: 200 px;
}
Or:
.parent-div {
display: flex;
flex-wrap: wrap;
}