Fit paper-input to div?

Question

My paper-input is extending outside of the parent div, and I don't know why. I've tried setting the bottom margin but it does nothing. Here's what I have, the borders are for testing and will be removed later.

#main {
    width: 100%;
    height: 100%;
    
    border: 2px solid transparent;
}
.sliderContainer {
    width: 100%;
    height: 60px;
    border: 2px solid transparent;
}
.label {
    width: 100%;
    margin-left: 6px;
}
.labelValue {
    margin-left: 10px;
    color: #A6A6A6;
}
.sliderDiv {
    width: 100%;
    height: 40px;
    display: inline-block;
    border: 2px solid transparent;
}
.button {
    width: 1px;
    height: 30px;
    float: left;
    display: inline-block;
    border: 2px solid transparent;
}
.slider {
    width: 50%;
    height: 30px;
    margin-top: 3px;
    margin-right: 34px;
    display: inline-block;
    border: 2px solid transparent;
}

.syncOffset { /* This is the issue. */
    width: 16%;
    height: 40px;
    display: inline-block;
    border: 2px solid transparent;
}

.syncOffsetDiv {
    width: 5%;
    display: inline-block;
}

example

Answer 1

Figured it out, it was the label that was causing an issue. I added no-label-float to remove the floating label and vertical-align: top to the class and that made it work.