div has margin, but not in the inspector

Question

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>

The div has a width of 50%, not a margin. Or else you're referring to the margin added to `body` by default? — sol, Oct 03 '17 at 10:23

score 0 · Accepted Answer · answered Oct 03 '17 at 10:29

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>

score 0 · Answer 2 · answered Oct 03 '17 at 10:29

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>

div has margin, but not in the inspector

2 Answers2