List-item starting in the middle of the box - html

Question

I want to have a margin on the right and left side of the list-items hence why I created the "wrapper", can someone figure out why it starts somewhat on the center and not from left to right?
Here's a jsfiddle for it: http://jsfiddle.net/vd8rb51s/
.add-remove-skills {
position: relative;
float: right;
display: block;
border: 2px solid #d1d9de;
border-radius: 4px;
width: 287px;
height: 394px
}
ul.edit-skills {
}
ul.edit-skills li {
display: block;
margin: 0;
padding: 10px;
text-align: left;
background: #000;
margin-bottom: 15px
}
.skills-wrapper {
width: 267px;
margin: 0 auto
}
h3.manage-skills {
font-weight: 700;
font-size: 16px;
width: 100%;
padding: 15px;
margin-top: 0;
border-bottom: 2px solid #d1d9de
}
input.add-skill {
position: absolute;
font-size: 16px;
bottom: 0;
width: 100%;
height: 40px;
text-indent: 10px;
font-weight: 700;
border: none;
border-top: 2px solid #d1d9de
}
input.add-skill::-webkit-input-placeholder {
/* WebKit browsers */
color: #939fa7;
font-weight: 500
}
input.add-skill:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #939fa7;
font-weight: 500;
opacity: 1
}
input.add-skill::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #939fa7;
font-weight: 500;
opacity: 1
}
input.add-skill:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #939fa7;
font-weight: 500
}
<div class="add-remove-skills">
<h3 class="manage-skills">Manage skills</h3>
<div class="skills-wrapper">
<ul class="edit-skills">
<li>Skill number one</li>
<li>Skill number two</li>
<li>Skill number three</li>
</ul>
</div>
<input class="add-skill" placeholder="Add new skill here" type="text">
</div>

Answer 1

Most browsers add some padding-left to ul elements by default. Just remove it:
.edit-skills {
padding-left: 0;
}
.add-remove-skills {
position: relative;
float: right;
display: block;
border: 2px solid #d1d9de;
border-radius: 4px;
width: 287px;
height: 394px;
}
ul.edit-skills {
padding-left: 0;
}
ul.edit-skills li {
display: block;
margin: 0;
padding: 10px;
text-align: left;
background: #000;
margin-bottom: 15px;
}
.skills-wrapper {
width: 267px;
margin: 0 auto;
}
h3.manage-skills {
font-weight: 700;
font-size: 16px;
width: 100%;
padding: 15px;
margin-top: 0;
border-bottom: 2px solid #d1d9de;
}
input.add-skill {
position: absolute;
font-size: 16px;
bottom: 0;
width: 100%;
height: 40px;
text-indent: 10px;
font-weight: 700;
border: none;
border-top: 2px solid #d1d9de;
}
input.add-skill::-webkit-input-placeholder { /* WebKit browsers */
color: #939fa7;
font-weight: 500;
}
input.add-skill:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #939fa7;
font-weight: 500;
opacity: 1;
}
input.add-skill::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #939fa7;
font-weight: 500;
opacity: 1;
}
input.add-skill:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #939fa7;
font-weight: 500;
}
<div class="add-remove-skills">
<h3 class="manage-skills">Manage skills</h3>
<div class="skills-wrapper">
<ul class="edit-skills">
<li>Skill number one</li>
<li>Skill number two</li>
<li>Skill number three</li>
</ul>
</div>
<input type="text" class="add-skill" placeholder="Add new skill here">
</div>

Answer 2

unordered lists have a default indent/padding so that the bullets will not end up outside the list itself.
Ussually a CSS reset stylesheet would fix this kind of thing. It would contain something like this:
ul { margin: 0; padding: 0; }
or you can apply this in your case
ul.edit-skills { margin: 0; padding: 0; }