aligning toggle button and making it look like one - html

Question

So I am trying to align the toggle button I'm creating using CSS to be aligned with the 'paragraph description' as I'd like to call it but I can't seem to make it look the way I wanted it to look. I've not only provided a wireframe but a jsfiddle as well.
HTML code:
<p id="displayOption">Display Options</p>
<div id="onoffSwitch">
<ul id="btn" class="btn">
<li class="display-title" id="spoilers">
<span id="spoilerSwitch">Show/Hide Spoilers:</span>
<ul class="selector">
<li class="on">
<span class="onoffswitch-inner">
</li>
<li class="off">
<span class="onoffswitch-switch"></span></span>
</li>
</ul>
</li>
<li class="display-title" id="day-night">
<span id="day-nightSwitch">Day or Night Vision:</span>
<ul class="selector">
</ul>
</ul>
</div>
CSS code:
/***** options *****/
#displayOption {
text-align: center;
font-family: "Comic Sans MS", cursive, sans-serif;
border: .88px #efdaae;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
/*-moz-border-radius: 10px;
-webkit-border-radius: 10px;*/
width: 258px;
background-color: #945e38;
padding: .1px;
margin: 0px;
font-variant: small-caps;
font-size: 1.5em;
color: #fdfdfa;
}
#displayOption-invert {
text-align: center;
font-family: "Comic Sans MS", cursive, sans-serif;
border: .88px #efdaae;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
/*-moz-border-radius: 10px;
-webkit-border-radius: 10px;*/
width: 258px;
background-color: #efdaae;
padding: .1px;
margin: 0px;
font-variant: small-caps;
font-size: 1.5em;
color: #030303;
}
#onoffSwitch {
font-family: "Comic Sans MS", cursive, sans-serif;
border: 1px solid #945e38;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
padding: 7px 10px;
line-height: normal;
text-align: left;
padding-bottom: 18px;
color: #000000;
}
#onoffSwitch-invert {
font-family: "Comic Sans MS", cursive, sans-serif;
border: 1px solid #efdaae;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
padding: 7px 10px;
line-height: normal;
text-align: left;
padding-bottom: 18px;
color: #ffffff;
}
/*** unordered list ***/
#btn, #btn ul {
padding: 0px;
margin: 0px;
list-style-type: none; /*bullet removel*/
list-style: none; /*bullet removel*/
text-decoration: none; /*bullet removel*/
}
.display-title {
display: inline-block;
}
/*** text ***/
#spoilerSwitch, #daynightVision {
font-family: "Comic Sans MS", cursive, sans-serif;
line-height: normal;
color: #000000;
text-align: left;
margin-bottom: 10px;
}
#spoilerSwitch-invert, #daynightVision-invert {
font-family: "Comic Sans MS", cursive, sans-serif;
line-height: normal;
color: #FFFFFF;
text-align: left;
margin-bottom: 10px;
}
/*** toggle button ***/
.onoffswitch {
position: relative;
width: 50px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label, .onoffswitchInvert-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 0px;
}
.onoffswitch-inner, .offswitchInvert-inner {
display: block;
width: 200%;
margin-left: 100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 26px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
border: 2px solid transparent;
background-clip: padding-box;
}
.onoffswitch-inner:before {
content: "";
padding-left: 10px;
background-color: #2E8DEF;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "";
padding-right: 10px;
background-color: #CCCCCC; color: #333333;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 25px;
margin: 0px;
background: #000000;
position: absolute;
top: 0;
bottom: 0;
right: 65px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}

Answer 1

Looking in Element browser in Google Chrome, you have this class messed up
.onoffswitch-inner:before, .onoffswitch-inner:after {
You should not be using "width: x%". You should change the % to some unit such as px.