html - Divs are not floating left -

i have form , container div. container div looks this:

container

.container {   margin-left: auto;   margin-right: auto;   width: 500px; 

and inside container have divs classes of panel:

panel

.panel {   width: 50%;   float: left; 

but reason the panel not floating end of it's container?

here full html

html

<div class="container"> <%= form_with(model: fee_change_submission, local: true) |form| %>   <div class="panel">     <%= form.label :account_name, class: "panel__top-label" %>     <%= form.text_field :account_name, class: "panel__top-input" %>   </div>    <div class="panel">   <%= form.label :account_number, class: "panel__top-label" %>   <%= form.text_field :account_number, class: "panel__top-input" %>   </div> <% end %> </div> 

css

.container {       margin-left: auto;       margin-right: auto;       width: 500px;        h1 {         text-align: left;         padding-bottom: 10px;         margin-bottom: 20px;         border-bottom: 1px solid #ddd;       }        // forms       form {         .panel {           width: 50%;           float: left;            &__top-input {             width: 100%;             text-align: left;           }            &__top-label {             width: 100%;             text-align: left;             color: $gray-color;           }            .btn {             width: 100px;           }         }       }     } 

screenshot:

here picture of problem. can see, have set width to 50% it's not floating left.

there "nothing wrong" css. had remove scss variable , take styles after that, color: $gray-color;. think issue didn't know scss code, or mabye did?

.container {    margin-left: auto;    margin-right: auto;    width: 500px;  }  .container h1 {    text-align: left;    padding-bottom: 10px;    margin-bottom: 20px;    border-bottom: 1px solid #ddd;  }  .container .form .panel {    width: 50%;    float: left;  }  .container .form .panel__top-input {    width: 100%;    text-align: left;  }  .container .form .panel__top-label {    width: 100%;    text-align: left;    color: gray;  }  .container .form .panel .btn {    width: 100px;  }

<div class="container">    <form action="" class="form">      <div class="panel">        <label for="" class="panel__top-label" />        <input type="text" class="panel__top-input" />      </div>        <div class="panel">        <label for="" class="panel__top-label" />        <input type="text" class="panel__top-input" />      </div>        <div class="panel">        <label for="" class="panel__top-label" />        <input type="text" class="panel__top-input" />      </div>        <div class="panel">        <label for="" class="panel__top-label" />        <input type="text" class="panel__top-input" />      </div>    </form>  </div>

this edited scss

.container {   margin-left: auto;   margin-right: auto;   width: 500px;   h1 {     text-align: left;     padding-bottom: 10px;     margin-bottom: 20px;     border-bottom: 1px solid #ddd;   }   .form {     .panel {       width: 50%;       float: left;       &__top-input {         width: 100%;         text-align: left;       }       &__top-label {         width: 100%;         text-align: left;         color: gray; // change       }       .btn {         width: 100px;       }     }   } }