how can I separate 2 divs equally from left and right? - html

Question

Im a new in css and html. How can I separate 2 divs equally from left and right?? Here's my html code.
<div class="first-div">
<h1>About<h1>
</div>
<div class="second-div">
<h1>Services<h1>
</div>

Answer 1

you can try this. Learn Bootstrap grid or flexbox that would be easy for these kinds of task.
.container{
width:100%;
display:flex; /* for display it's child div beside each other */
}
.first-div,.second-div{
width:50%; /* for divide container into 2 equal divs */
border: 1px solid black; /* for border around divs */
}
<div class="container">
<div class="first-div">
<h1>About<h1>
</div>
<div class="second-div">
<h1>Services<h1>
</div>
</div>

Answer 2

You have several options and it all depends on your exact use case.
The first option is to set both to 50% of the available width (left and right):
.first-div {
display: inline-block;
width: 50%;
}
.second-div {
display: inline-block;
width: 50%;
}
<div class="first-div">
<h1>About</h1>
</div><div class="second-div">
<h1>Services</h1>
</div>
Another option is to use flex:
.wrapper {
display: flex;
}
.first-div {
flex-grow: 1;
}
.second-div {
flex-grow: 1;
}
<div class="wrapper">
<div class="first-div">
<h1>About</h1>
</div>
<div class="second-div">
<h1>Services</h1>
</div>
</div>
If you're not familiar with flex, flexbox froggy is a great interactive way to learn.
And a final option is to use grid:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}
<div class="wrapper">
<div class="first-div">
<h1>About</h1>
</div>
<div class="second-div">
<h1>Services</h1>
</div>
</div>
If you're not familiar with grid, grid garden is a great interactive way to learn.
Sidenote: make sure to also properly close the <h1> tags with a </h1>.

Answer 3

Try this code. Hope it useful for your question.
/* CSS */
.container-box{
width:100%;
display:flex;
}
.first-div,.second-div{
width:50%;
border:1px solid #ddd; //just to look
}
<!-- HTML -->
<div class="container-box">
<div class="first-div">
<h1>About<h1>
</div>
<div class="second-div">
<h1>Services<h1>
</div>
</div>

Answer 4

Check Css FlexBox .
FlexBox Tutorial
<div class="mainContainer" style="
display: flex;
justify-content: space-around;
">
<div class="first" style="
border: 1px solid;
">
<h1>About</h1><h1>
</h1></div>
<div class="second-div">
<h1>Services</h1><h1>
</h1></div>
</div>