first-child selector not working

Question

I am trying to build a simple box system and I need to remove the right margin of the first child.

I have tried both first-child and first-of-type and still cannot properly target the intended class.

I have read through a number of different examples and still cannot find a solution.

Please see this fiddle and help me remove the margin-left from the first child.

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: black;
}

.box {
  margin: 1% 0 1% 0;
  float: left;
  background-color: gray;
  box-sizing: border-box;
  color:white;
}
.box.full {
  width: 100%;
  margin-left: 0;
}

.box.half {
  width: 49%;
  margin-left: 1%;
}

.half:first-child {
  margin-left: 0;
}

Answer 1

The first .half class element is not the first child of .container. It is the second child, thus your selector does not work.

I would suggest using

.box.full + .box.half {
    margin-left: 0;
}

to specify that any .box.half coming immediately after a .box.full have the margin you desire.