为什么空格之间不起作用？

.row_without_margin {
	padding: 0 15px;
	display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.data_item {
	display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.date_range {
    height: 30px;
    padding: 13px 6px 13px 18px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0.5px 0.866px 4px 0 rgba(0,0,0,0.05);
    border: 1px solid #e3e4e5;
  /*  flex: 0 0 16.6666666667%;*/

}
#date-range1, #date-range2 {
	height: 30px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0.5px 0.866px 4px 0 rgba(0,0,0,0.05);
    border: none;
	width: 80%;
    padding-left: 40px;
    font-size: 16px;
    color: #000000;
    background: url(https://static.sanatorium.com/frontend/common/calendar_new.svg) no-repeat 0 center #fff;
}

<div class="row_without_margin">
  <div class="data_item">
    <div class="date_range">
      <input id="date-range1" name="daterange" size="40" value="05.02.2018" readonly >
    </div>
  </div>
  <div class="data_item">
    <div class="date_range">
      <input id="date-range2" name="daterange" size="40" value="Дата выезда" readonly >
    </div>
  </div>
  <div class="search_item">
    <div class="data_item">
      <div class="date_range">
        <div class="guests">
          <select>
            <option>1</option>
            <option>1</option>
            <option>1</option>
          </select>
        </div>
      </div>	
    </div>
  </div>
  <div class="search_item">
    <div class="data_item">
      <div class="date_range">
        <div class="guests">
          <select>
            <option>1</option>
            <option>1</option>
            <option>1</option>
          </select>
        </div>
      </div>	
    </div>
  </div>
</div>