My Design Is Not Consistent In Firefox And Safari

Following my previous question, I have a code to show 8 boxes in two rows. The code perfectly works in FireFox and Chrome but not in Safari! Firefox's output Safari's output I ha

Solution 1:

Use the prefixes!

display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;

CanIUse is a great spot to confirm support! And if you can swing it, I highly recommend working AutoPrefixer into your workflow!

IN THE SAMPLE CSS:

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

.itemClass {
  width: 100%;
  margin: 001em0;
  box-shadow: 0px0px1px1px black;
  background: white;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.boxes {
  list-style: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  max-width: 1900px;
  width: 100%;
  margin: 0 auto;
  padding: 1em;
}

.boxesheader {
  margin: 0 auto -35px;
  max-width: 1900px;
  padding: 1em0;
  width: 100%;
}

.itemClass>img {
  height: 74px;
  width: 120px;
  margin: 05px00;
}

.itemClass>span {
  width: calc(100% - 55px);
  margin-left: 2%;
}

@media ( min-width :599px) {
  .itemClass {
    width: 49%;
    margin: 02%1em0;
  }
}

@media ( min-width :599px) and (max-width:1024px) {
  .itemClass:nth-child(2n + 2) {
    margin: 001em0;
  }
}

@media ( min-width :1024px) {
  .itemClass {
    width: 24%;
    margin: 01.3333333333%1em0;
  }
  .itemClass:nth-child(4n + 4) {
    margin: 001em0;
  }
}

I couldn't explain vendor prefixes any better than the answer here! So give that a read. And a little more information: http://shouldiprefix.com/

Solution 2:

Add float:left to ".itemClass"

.itemClass {
      float: left;
      }