<p>I want to create a box shape and I am having trouble.
I want the box to have a background color, and then different color inside the box.<br>
The box will then have a list of items using ul and li, and each list item will have a background of white, and the list item's background color is too stretch the entire distance of the inner box.
Also, the list items should have a 1 px spacing between each one, so that the background color of the inside box color is visible.</p>

<p>Here is a rough sketch of what I am trying to do:</p>

<p><a href="https://i.stack.imgur.com/aZ2W7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aZ2W7.png" alt=""></a></p>

So if you have source:
```
```
<div class="panel">
  <div>Some other stuff</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>
```
```
You can use CSS:
```
```
div.panel { background-color: #A74; border: solid 0.5em #520; width: 10em; 
            border-width: 0.75em 0.25em 0.75em 0.25em; }
div.panel div { padding: 2px; height: 4em; }
div.panel ul li { display: block; background-color: white; 
                      margin: 2px; padding: 1px 4px 1px 4px; }
div.panel ul { margin: 0; padding-left: 0; }
```
```
To get the CSS to work properly (particularly on Internet Explorer), make sure you have an appropriate DOCTYPE definition in your document.  See
w3c recommended doctypes
for a list.