CODEWITHSUNDEEP
javascripthtmlcss
Hungus Bungus
Hungus Bungus

Reputation: 57

Why do my divs have this mysterious right margin?

I am trying to align divs #inner3 and #inner4 side by side, but they refuse to cooperate. When I inspect the DOM through Chrome, there is this mysterious right side margin on both divs that extends to the end of the page.

I have the global margin set to 0, but when I look deeper it says that there is no value for margin, period. Why?? Why won't my divs cooperate either? I have removed white space, made them smaller, floating, all to no avail. I have been searching and struggling for over 2 hours now.

Note: the overflow-x is for the animation; the background CSS is for the parallax.

body, html {
  height: 100%;
  overflow-x: hidden;
  margin: 0em;
}

#section2 {
  height: 500px; 
  width: 100%;
  background-color: black;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px;
  display: inline-block;
  font-size: 0;
}

#inner3 {
  height: 500px;
  width: 50%;
  font-size: 12px;
}

#inner4 {
  height: 500px; 
  width: 50%;
  font-size: 12px;
}

Code: https://codepen.io/hungus--bungus/pen/rdgEze?editors=1100

Page: https://codepen.io/hungus--bungus/full/rdgEze

Orange portion is the UNK margin

enter image description here

Photos are taken using the Chrome "Inspect" feature, and information can be found in the "Computed" tab at the bottom after selecting the element.

Upvotes: 2

Views: 361

Answers (1)

Jake Reece
Jake Reece

Reputation: 1168

Adding display: inline-block; to #inner3 and #inner4 will put them side-by-side.

#inner3 {
  height: 500px;
  width: 50%;
  font-size: 12px;
  display: inline-block;
}

#inner4 {
  height: 500px; 
  width: 50%;
  font-size: 12px;
  display: inline-block;
}

Upvotes: 2

Related Questions