Why is my manually set width being set to auto?

Question

I'm manually setting the width to be 67px. As you can see, the dev tools show the following:

#tango-directive-template .tango .left-icons {
  width: 67px;
}

But as you can also see, the actual width is only 39.964px. It's being set to auto and calculated by the browser.

Why is this? And how should I prevent this?

---

app.scss

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

a {
  cursor: pointer;
}

tango.directive.scss

#tango-directive-template {
  .tango {
    margin-bottom: 20px;
    .left-icons {
      width: 67px;
      img, .author {
        position: relative;
        bottom: 15px;
        margin-right: 5px;
      }
      img {
        height: 20px;
      }
      .author {
        border: 1px solid gray;
        border-radius: 25px;
        padding: 10px;
      }
    }
    textarea {
      font-size: 18px;
      width: 700px;
      line-height: 135%;
      padding: 8px 16px;
      resize: none;
      border: 1px solid white;
      overflow: hidden;
    }
    textarea:focus {
      outline: none;
      border: 1px solid gray;
      overflow: auto; // only have scroll bar when focused
    }
    .menu {
      width: 750px;
      span {
        float: right;
        margin-left: 15px;
        cursor: pointer;
      }
    }
  }
  @for $i from 0 through 10 {
    .level-#{$i} {
      position: relative;
      left: #{$i*65}px;
    }
  }
}

Answer 1

span elements by default have display: inline;. Browsers ignore any widths or heights set on inline elements; they behave as if they're just text.

If you want to set a width on an element, use display: block; or display: inline-block;.

MDN has a full reference for the display property.