li padding not acting as it should : Can someone please explain why my padding is not acting as it should? My padding should be a perfect box, but for some reason it's coming out as some oblong rectangle. A padding of 30 all the way around the sides should be a perfect square. I have more rules for my other li and ul but that's for only in my '#nav' ID, so I don't see why there would be any conflict.

<!-- begin snippet: js hide: false console: true -->

<!-- language: lang-css -->

    html {
     height: 100%;
    }

    body{
     height: 100%;
     margin:0;
     font-family: courier;
     font-size: 22px;
     color: white;
    }






    #wrapper{
     position: relative;
     margin-left: auto;
     margin-right: auto;
     width: 85%;
     min-height: 100%;
     margin-top: -130px;
    }



    #inner{
     margin-top: 130px;
     width: auto;
    }







    /*
    #wrapper{
        margin-left: auto;
        margin-right: auto;
        border: 1px solid blue;
        width: 85%;
        background-color: blue;
        height: calc(100vh - 130px);
    }

    */



    #footer, #wrapper:after{
     height: 130px;
    }


    .wrap {
     margin: 0 auto;
     width: 100%;
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
    }

    .sub {
     padding: 12px;
     width: 32%;
     height: 100px;
     color: white;
     border-right: solid white 1px;
    }

    .sub:last-child{
     border: 0px;
    }


    #nav {
     list-style: none;
     font-weight: bold;
     width: 100%;
     text-align: center;
     background-color: #862d59;
     height: 100px;
     box-shadow: 0px 5px 8px grey;
    }

    #nav ul {
     list-style-type: none;
     margin: 0px;
     padding: 0; 
     overflow: auto;
    //  background-color: #862d59;
    }

    #nav li {
     margin: 0px;
     display: inline-block;
    }

    #nav li a {
     padding: 10px;
     display: inline-block;
     text-decoration: none;
     font-weight: bold;
     font-size: 30px;
     color: white;
    // background-color: #862d59;
    }

    #nav li a:hover {
    color:  white;
    text-shadow: 2px 2px 4px white;
    }

    #footer {
     display: flex;
     height: 130px;
     width: 100%;
     background-color: #862d59;
     clear: both;
    }


    li.middle{
     background-color: #26004d;
     padding: 10px 10px 10px 10px;
     margin-right: 30px;
     margin-top: 200px;
     text-align: center;
     color: white;
    }



<!-- language: lang-html -->

    <div id="wrapper">

    	<div id="inner">
    		<ul>

    			<li class="middle">some stuff</li>

    		</ul>

    	</div>





    	</div>



    	<div id="footer">

    		<div class="wrap">

    			<div class="sub"></div>
    			<div class="sub"></div>
    			<div class="sub"></div>

    		</div>




    	</div>

<!-- end snippet -->

