Problema del padding de un div (Desborde)

[fegm_4]

Saludos a todos!

Actualmente me encuentro realizando una página con un diseño flexible pero en el camino me he encontrado un problema. Al colocar el siguiente codigo html:

Código HTML:

<ul class="two clearfix">
<li></li>
<li><a href=# class="btn blue"</li>
</ul>
 

Obtengo el siguiente resultado


El css que he usado es el siguiente:

Código CSS:

.two {list-style: none; margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.two ul {list-style: none}
.two> li {float: left}
.two > li:nth-child(1){width: 15%; max-width: 150px; margin-right: 1%;}
.two > li:nth-child(2) {width: 83%; max-width: 830px; margin-left: 1%;}
 
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
 
.btn {border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px;}
a.btn.blue{background: #FFF; border: 1px solid #2f5992; color: #2f5992; font-size: 2.4em; padding: 0.2em 1em;}
 

Como se observa en la imagen, el "boton" se desborda del li y creo que es ocasionado por el padding. Quisiera que esto no ocurriera.

He intentado colocar un margin-top pero esto no dio resultado.

Agradezco mucho quien pueda ayudarme