Navbar dropdown menu won't center the text

[lodott1]

Hi wc3schools forum members! I have a slight issue with my newly created navbar. I can't seem to get the text on the dropdown menu centered. I want the second block in the dropdown menu, "recordings", to have centered text, so that it doesn't just align with the previous block "videos". Any suggestions? Here is my css and html so far: css:

nav ul {    width: 80%;    margin-left: auto;    margin-right: auto;    margin-top: 0;    padding: 0;    list-style: none;      background-color: #7b7b7b;    background-image: linear-gradient(#a7a7a7, #505050);    border-bottom-left-radius: 10px;    color: white;    font-family: 'Open Sans';    font-size: 14}nav ul li{    float: left;    display: inline-block;    position: relative;}nav ul a{    display: inline-table;    float: left;    padding: 1em 5em;    border-radius: 10px;}nav ul li:hover > a{    background-color: #a0bbcc;} *html nav ul li a:hover/* IE6 */{    color: #fafafa;} nav ul li:hover > ul {    display: block;} /* Sub-menu */nav ul ul {    list-style: none;    margin: 0;    padding: 0;    display: none;    position: absolute;    left: 0;    top: 100%;    width: 100%;    z-index: 99;           background-image: linear-gradient(#bfbf88, #7e7e5a);      -moz-border-radius: 10px;    border-radius: 10px;} nav ul ul li {    float: none;    margin: 0;    display: block; } nav ul ul li:last-child {     box-shadow: none;} nav ul ul a {        padding: 1em 5em;    height: auto;    line-height: 1;    display: block;    white-space: nowrap;    float: none;    text-transform: none;} *html nav ul ul a { /* IE6 */       height: 10px;    width: 150px;} *:first-child+html nav ul ul a { /* IE7 */        height: 10px;    width: 150px;} nav ul ul a:hover {    background-color: #0186ba;    background-image: linear-gradient(#04acec, #0186ba);} nav ul ul li:first-child a /* This controls the first dropdown menu size*/{    border-radius: 5px 5px 0 0;} nav ul ul li:first-child a:after /* This controls the triangle arrow */{    content: '';    position: absolute;    left: 30px;    top: -8px;    width: 0;    height: 0;    border-left: 5px solid transparent;    border-right: 5px solid transparent;    border-bottom: 8px solid #bfbf88;} nav ul ul li:first-child a:hover:after {    border-bottom-color: #04acec; } nav ul ul li:last-child a {    border-radius: 0 0 5px 5px;} /* Clear floated elements */nav ul:after {    visibility: hidden;    display: block;    font-size: 0;    content: " ";    clear: both;    height: 0;}* html #menu             { zoom: 1; } /* IE6 */*:first-child+html #menu { zoom: 1; } /* IE7 */ 

html:

<nav>    <ul>        <li><a href="#">HOME</a></li>        <li><a href="#">Read</a></li>        <li><a href="#">Listen</a>            <ul>            <li><a href="#">Videos</a></li>            <li><a href="#">Recordings</a></li>            </ul></li>        <li><a href="#">Contact</a></li>        </ul>    </nav>

[lodott1]

Solved it myself! Turns out the sinner was my padding in:

nav ul ul a {        padding: 1em 5em;    height: auto;    line-height: 1;    display: block;    white-space: nowrap;    float: none;    text-transform: none;}

I switched to padding: 1em 3em;

Turns out with padding at 5em, it pushed the "recording" to the right.