div has margin, but not in the inspector [duplicate] - html

Question

This question already has answers here:
How to place two divs next to each other? [duplicate]
(13 answers)
Closed 5 years ago.
I have a <div> with two <div>s in it, but the first <div> called facePlus has a margin when you hover over it in the inspector, and when you scroll down to the table it says it doesn't have it:
.facePlus {
width: 50%;
margin-right: 0%;
}
.twittIn {
width: 50%;
position: absolute;
left: 50%;
}
.socialMedia {
display: inline;
}
<div class="socialMedia">
<div class="facePlus">
<i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
<i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
</div>
<div class="twittIn">
<i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
<i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
</div>
</div>

Answer 1

how can I put them next to each other?
use flexbox
.socialMedia {
display: flex;
}
.socialMedia>div {
flex: 1
}
<div class="socialMedia">
<div class="facePlus">
<i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
<i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
</div>
<div class="twittIn">
<i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
<i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
</div>
</div>

Answer 2

Two approaches for you...
You can use the display property to place your divs side by side...
.facePlus {
width: 48%;
display: inline-block;
}
.twittIn {
width: 48%;
display: inline-block;
}
<div class="socialMedia">
<div class="facePlus">
<i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
<i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
</div>
<div class="twittIn">
<i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
<i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
</div>
</div>
Or you can use flexbox which you can read more about here:
.socialMedia {
display: flex;
}
.facePlus,
.twittIn {
flex: 1;
}
<div class="socialMedia">
<div class="facePlus">
<i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
<i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
</div>
<div class="twittIn">
<i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
<i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
</div>
</div>