<li> not moving bullets with padding

Question

I'm trying to move the bullet points so they're inside my box wrap. They will not move. I'm also trying to have have an unordered list inside a ordered list as a sub-list.

HTML

<div class="box-wrap">
     <h2>Regler</h2>

    <p>
        <ul>
            <li>List Item
                <ol>
                    <li>Text Here</li>
                    <li>Text Here</li>
                    <li>Text Here</li>
                </ol>
            </li>
        </ul>
    </p>
</div>

CSS

.box-wrap {
    width: 100%;
    height: auto;
    margin: 20px 0 0 0;
    -webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}
.box-wrap p {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 5px 30px;
    overflow: hidden;
    text-align: left;
    width: 640px;
    height: auto;
    background: #ffffff;
    color: #717171;
}
.box-wrap li {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 5px 30px;
    width: 640px;
    height: auto;
    background: #ffffff;
    color: #717171;
    list-style-type: circle;
}

Thank you

Answer 1

Demo Fiddle

You need to close your ol and add a closing </li>, to move the bullet positions you can also use list-style-position:inside

Also, you currently have your ul and ol the wrong way around according to your requirements, and are overrideing the default li numbering by giving all your li list-style-type: circle;. Change your CSS per:

.box-wrap {
    width: 100%;
    height: auto;
    margin: 20px 0 0 0;
    -webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}
ul, ol {
    list-style-position:inside;
}
.box-wrap p {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 5px 30px;
    overflow: hidden;
    text-align: left;
    width: 640px;
    height: auto;
    background: #ffffff;
    color: #717171;
}
.box-wrap li {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 5px 30px;
    width: 640px;
    height: auto;
    background: #ffffff;
    color: #717171;
}
.box-wrap ul li {
    list-style-type: circle;
}