Responsive Layout Stops Shrinking Past a Certain Point

I'm making a Todo list and I'm having trouble with the CSS.

Im trying to have my list items set up width two buttons on the right hand side,right next to each other, in line horizontally and centered vertically.

Each List item has a div, then within each list items div there are two more divs. One is for text(on the left side). The other is for The buttons(to the right of the text div).

They are already for the most part centered vertically, however when I shrink the browser window down to a certain width, the buttons vertically stack on top of each other unevenly. Also the entire list item wont shrink below a certain width(roughly 450px).

My desired result is to have the list item width shrink with the window.

<div id="listcontainer">
       <ul id="itemlist">
        <li>
        <div class="itemdiv">

               <div class="text"></div>
               <div class="buttondiv">

                    <button id="complete" class="complete"></button>
                    <button id="remove" class="remove"></button>

               </div>




             </div>
         </li>
      </ul>
    </div>

CSS:

ul {
    margin-top: 100px;
    padding-left:10%;
    list-style-type: none;
    margin-top: 100px;
    padding-left: 0%;
    list-style-type: none;
    margin-left: 10%;
    margin-right: 10%;
    }

    li button{
      margin-right: 10px;
      margin-top: 7px;
      height: 40px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }

    .itemdiv{
      width: 100%;
      min-width: 520px;
      min-height: 55px;
      margin-bottom: 20px;
      background: #9DBDCF;
      text-indent: 20px;
      font-size: 20px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      max-height: 55px;
      display: table;


    }
    .buttondiv{
      width: 200px;
      display: table-cell;
    }

    .text{
      height: 50px;
      max-width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: table-cell;
    }