title: CSS - Overide Width
body: <p>I have the following html where the software automatically adds the first css style <code>g2f0</code></p>
  
  <pre><code> &lt;div class="linelevel row"&gt;
      &lt;div class="g2f0 col-sm-6 form-group"&gt;
         &lt;label for="name"&gt;Name&lt;/label&gt;
         &lt;input id="name" type="text" value="" name="name"&gt;
      &lt;/div&gt;
      &lt;div class="g2f1 col-sm-6 form-group"&gt;
         &lt;label for="address"&gt;Address&lt;/label&gt;
         &lt;input id="address" type="text" value="" name="address"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The style is incrementally auto generated and gets inserted as the first class for each div as follows depending on the number of divs there are on the page:</p>
  
  <pre><code>div.g2f0 {
      float: left;
      width: 50%;
  }
  
  div.g2f1 {
      float: left;
      width: 50%;
  }
  </code></pre>
  
  <p>I want to get rid of the width proprty on these auto generated classes so that I can use the bootstrap grid classes. I've tried using specificity as follows but then the bootrap grid classes dont work at breakpoints:</p>
  
  <pre><code>&lt;div class="linelevel row"&gt;
      &lt;div class="g2f0 reset-width col-sm-6 form-group"&gt;
         &lt;label for="name"&gt;Name&lt;/label&gt;
         &lt;input id="name" type="text" value="" name="name"&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  
  .linelevel .reset-width {
      width: auto;
  }
  </code></pre>
  
  <p>I've had to do the following to get it to work meaning I have to overide all break points for all grid classes:</p>
  
  <pre><code> @media (max-width: 768px) {
     .col-sm-6 {
        width: 100% !important;
      }
   }
  </code></pre>
  
  <p>Any one know any other way where I can use a single class between <code>g2f0</code> (these are auto generated) and <code>col-sm-6</code> to remove the width from the <code>g2f0</code> class?</p>