How to align div next to each other inside li with width as percentage
<p>I am trying to make responsive layout. I have two <code>&lt;div&gt;</code>'s inside two different <code>li</code> elements. I want to adjust them on screen change and with media query on specific size. I want them to move down. If I make their width in pixel they are coming next to each other but if I make width in percentage they are overlapping each other. How can I make their width in percentage and not to overlap eachother? Please see the jsfiddle. Thanks</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#btmIconsDiv {
  float: left;
  margin-top: 84px;
  width: 100%;
  height: 341px;
  background-color: orange;
  position: relative;
}
#btmIconsDiv ul li {
  display: inline-block;
  list-style-type: none;
  margin-left: 30px;
}
#btmIconsDiv ul li div.btmIconsUlliDiv {
  float: left;
  width: 274px;
  height: 300px;
  background-color: red;
  border: 1px solid blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="btmIconsDiv"&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;div class="btmIconsUlliDiv"&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="btmIconsUlliDiv"&gt;&lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>jsFiddle</strong>
  <a href="https://jsfiddle.net/mohsinali/mucs2ep3/1/" rel="nofollow">https://jsfiddle.net/mohsinali/mucs2ep3/1/</a></p>