Place div side by side - html

Question

My HTML code is like below
<div class="col-lg-4">
<ul>
<div class="area" id="div_1">
<li class="category" id="1">Hair</li>
</div>
<div class="area" id="div_3">
<li class="category" id="3">Skin Care</li>
</div>
<div class="area" id="div_4">
<li class="category" id="4">Makeup</li>
</div>
<div class="area" id="div_5">
<li class="category" id="5">Body Treatments</li>
</div>
<div class="area" id="div_6">
<li class="category" id="6">Sports Massage</li>
</div>
<div class="area" id="div_7">
<li class="category" id="7">Physiotherapy</li>
</div>
<div class="area" id="div_8">
<li class="category" id="8">Intensive Healing Pedicure</li>
</div>
<div class="area" id="div_9">
<li class="category" id="9">Pedicure Refresher</li>
</div>
<div class="area" id="div_10">
<li class="category" id="10">Therapeutic Pedicure</li>
</div>
</ul>
</div>
My CSS code is like below
.col-lg-4 > ul {
overflow-x: scroll;
width: 100%;
display:flex;
}
.category {
border:0;
padding: 0;
margin-right: 30px;
font-size: 15px;
}
I would like to put div side by side with full width of their content and some margin right side.
I am getting output like below
I need output text will be in one line.

Answer 1

"I need output text will be in one line." Here's everything in one line. Basically, all you needed was white-space: nowrap. I removed the extra HTML of the divs wrapping each li since that was invalid HTML and wasn't necessary. If you need divs, put them inside the lis. I'd make them spans though.
.col-lg-4>ul {
overflow-x: scroll;
width: 100%;
display: flex;
}
.category {
border: 0;
padding: 0;
margin-right: 30px;
font-size: 15px;
display: inline-block;
white-space: nowrap;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<div class="col-lg-4">
<ul>
<li class="category" id="1">Hair</li>
<li class="category" id="3">Skin Care</li>
<li class="category" id="4">Makeup</li>
<li class="category" id="5">Body Treatments</li>
<li class="category" id="6">Sports Massage</li>
<li class="category" id="7">Physiotherapy</li>
<li class="category" id="8">Intensive Healing Pedicure</li>
<li class="category" id="9">Pedicure Refresher</li>
<li class="category" id="10">Therapeutic Pedicure</li>
</ul>
</div>

Answer 2

In a grid layout, content must be placed inside columns (.col and .col-*) and only columns may be the immediate children of rows (.row). Rows should be placed inside a .container or .container-fluid for proper padding and alignment.
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<div class="col-md-6">Column left</div>
<div class="col-md-6">Column right</div>
</div>
</div>

Answer 3

The width of col-lg-4 is only 25% of the page. The text is getting cramped because of this. You can change it to col-lg-12 to occupy the whole page.
.col-lg-12>ul {
overflow-x: scroll;
width: 100%;
display: flex;
}
.category {
border: 0;
padding: 0;
margin-right: 30px;
font-size: 15px;
}

Answer 4

try this instead,
First of all remove all div inside the ,
Then,add this style,
.col-lg-4 > ul {
overflow-x: scroll;
white-space:nowrap;
margin:0;
}
.category {
margin-right: 30px;
font-size: 15px;
display:inline-block;
}
white-space:nowrap makes the inline. More info about white-space
All <li> makes inline by display:inline-bock. More info about display
.col-lg-4 > ul {
overflow-x: scroll;
white-space:nowrap;
margin:0;
}
.category {
margin-right: 30px;
font-size: 15px;
display:inline-block;
}
<div class="col-lg-4">
<ul>
<li class="category" id="1">Hair</li>
<li class="category" id="3">Skin Care</li>
<li class="category" id="4">Makeup</li>
<li class="category" id="5">Body Treatments</li>
<li class="category" id="6">Sports Massage</li>
<li class="category" id="7">Physiotherapy</li>
<li class="category" id="8">Intensive Healing Pedicure</li>
<li class="category" id="9">Pedicure Refresher</li>
<li class="category" id="10">Therapeutic Pedicure</li>
</ul>
</div>