title: How do I put a border around my form using CSS?
body: <p>I'm trying to create a border around my checklist but I'm not sure how to write the CSS.. Currently the border is going around everything.. I've attached a screen shot to show you what I mean. The black border is what I'm getting and the red border I added in paint to show you what I'm trying to do.. Any help would be appreciated. </p>
  
  <p>Image uploaded using imgbb.com</p>
  
  <p><a href="https://ibb.co/h6xTbK" rel="nofollow noreferrer">https://ibb.co/h6xTbK</a></p>
  
  <p>My HTML for the left side "Subject list" and the center checklist</p>
  
  <pre><code>&lt;div class="notes"&gt;
      &lt;h2 class="subject"&gt;Subject Notes&lt;/h2&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="htmlnotes.html"&gt;HTML&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="cssnotes.html"&gt;CSS&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javanotes.html"&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="rubynotes.html"&gt;Ruby&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="railsnotes.html"&gt;Ruby on Rails&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="jquerynotes.html"&gt;jQuery&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  
  
  &lt;div class="checklist"&gt;
  &lt;h2&gt;To Do List&lt;/h2&gt;
  &lt;!-- To do list with check box as a test --&gt;
  
          &lt;form&gt;
              &lt;input type="checkbox" name="list" value=""&gt;data&lt;/input&gt;&lt;br&gt;
              &lt;input type="checkbox" name="list" value=""&gt;data&lt;/input&gt;&lt;br&gt;
              &lt;input type="checkbox" name="list" value=""&gt;data&lt;/input&gt;&lt;br&gt;
              &lt;input type="checkbox" name="list" value=""&gt;data&lt;/input&gt;&lt;br&gt;
              &lt;input type="checkbox" name="list" value=""&gt;data&lt;/input&gt;&lt;br&gt;
              &lt;input type="checkbox" name="list" value=""&gt;data&lt;/input&gt;&lt;br&gt;
              &lt;input type="checkbox" name="list" value=""&gt;data&lt;/input&gt;&lt;br&gt;
              &lt;input type="checkbox" name="list" value=""&gt;data&lt;/input&gt;&lt;br&gt;
              &lt;input type="checkbox" name="list" value=""&gt;data&lt;/input&gt;&lt;br&gt;
              &lt;input type="checkbox" name="list" value=""&gt;data&lt;/input&gt;&lt;br&gt;
              &lt;input type="checkbox" name="list" value=""&gt;data&lt;/input&gt;&lt;br&gt;
          &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS for the left side "Subject notes" and the center checklist..</p>
  
  <pre><code>.notes ul {
      position: absolute;
      list-style-type: none;
      margin: 0 0;
      padding: 0;
      overflow: hidden;
      }
  
  .notes {
      position: absolute;
      top: 160px;
  }
  
  .notes ul li {
      margin: 10px;
  
  }
  
  .notes li a{
      text-decoration: underline;
      color: #493C3D;
  
  }
  
  
  .checklist {
      position: relative;
      text-align: center;
      border-style: solid;
      border-width: 5px;
  }
  </code></pre>