Question

I am creating a <ul> and <li> wrapped by <section> tag. Everything works fine except the list style (dot) display outside of my <section> tag. I am not sure why. I appreciate it if someone can share tips. Thanks a lot.

my html

<section id='test'>
    <ul>
       <li>line 1 jiofjisojfoisdjfoisjfio</li>
       <li>line 2 jiofjisojfoisdjfoisjfio</li>
       <li>line 3 jiofjisojfoisdjfoisjfio</li>
       <li>line 4 jiofjisojfoisdjfoisjfio</li>
       <li>line 5 jiofjisojfoisdjfoisjfio</li>
       <li>line 6 jiofjisojfoisdjfoisjfio</li>
       <li>line 7 jiofjisojfoisdjfoisjfio</li>
   </ul>

</section>

CSS

section { 

    display: block;
    width: 1200px;
    margin: 50px auto;
    border: 3px solid red;

}

It displays like this..

 ----------------------
*| line 1 jioj..       |
*| line 2 jiof..       |
*| line 3 jiof..       |
*| line 4 jiof..       |
*| line 5 jiof..       |
*| line 6 jiof..       |
 -----------------------

The black dot is outside of the section tag.

Answer 1

shows it fine DEMO

keep unchecked the Normalized CSS checkbox on JSFiddle