title: how to make div take full width of parent div
body: <p>How do I get the color div to take up the full width of the parent div <code>.starter</code> so that the entire width is one color? I've tried everything and haven't made progress. I've isolated the problem for ease of containment. Thanks in advance!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;      
          &lt;title&gt;Pricing&lt;/title&gt;
          &lt;link href="styles2.css" rel="stylesheet" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;/div&gt;
              &lt;ul id="plans"&gt;
                  &lt;li&gt;
                      &lt;div id='starter' class="col-4 col-m-12"&gt;
                          &lt;h1&gt;Starter&lt;/h1&gt;
                          &lt;div class="color"&gt;&lt;h3 id="test"&gt;1 Hour&lt;/h3&gt;&lt;/div&gt;
                          &lt;p&gt;$25&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>* {
      box-sizing: border-box;
  
  }
  .row::after {
      content: "";
      clear: both;
      display: block;
  }
  [class*="col-"] {
      float: left;
      padding: 15px;
  } 
  /* For mobile phones: */
  [class*="col-"] {
      width: 100%;
  }
  @media only screen and (min-width: 600px) {
      /* For tablets: */
      .col-m-1 {width: 8.33%;}
      .col-m-2 {width: 16.66%;}
      .col-m-3 {width: 25%;}
      .col-m-4 {width: 33.33%;}
      .col-m-5 {width: 41.66%;}
      .col-m-6 {width: 50%;}
      .col-m-7 {width: 58.33%;}
      .col-m-8 {width: 66.66%;}
      .col-m-9 {width: 75%;}
      .col-m-10 {width: 83.33%;}
      .col-m-11 {width: 91.66%;}
      .col-m-12 {width: 100%;}
  }
  @media only screen and (min-width: 768px) {
      /* For desktop: */
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
  }
  #header{
      padding:15px;
      background-color:rgb(157,221,220);
      margin-bottom:7px;
  }
  
  body{
      background-color:white;
      color:rgb(164,111,67);}
  a{
      text-decoration:none;
      color:rgb(164,111,67);
  }
  #info{
      padding:0;
      text-align: center;
  }
  #pricing{
  
      padding:30px;
  }
  #starter, #basic, #deluxe{
      background-color:lightgray;
      text-align: center;
      border:5px solid white;
  }
  ul{
      margin:0;
      padding:0;
  }
  li{
      list-style:none;
  }
  #test{
      background-color:white;
      width:100%;
  }
  
  #color{
      margin:0;
      background-color:white;
  }
  html, body{}
  </code></pre>
  
  <p>I want it to look like this<a href="https://i.stack.imgur.com/rgmEq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rgmEq.png" alt="enter image description here"></a></p>