Ares_06 Ares_06 - 11 months ago 110
CSS Question

div has margin, but not in the inspector

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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download