navigation wants to be left aligned

I want my navigation to be left aligned inside aside div. I want it to be aligned just like my paragraph in my aside div. but the navigation is sitting more towards right side. can anyone sort it out for me?

.sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width:100%;
    }

.sidebar li{ width:100%;list-style-type: none;border-bottom:1px white solid;}
.sidebar a:link, a:visited {
    display: block;
    font-weight: bold;
    color: black;
    background-color: royalblue;
  /*    width: 120px;  */

    text-align: center;
    padding: 4px;
    text-decoration: none;
    }
.sidebar a:hover, a:active {
    background-color: #7A991A;
    color:black;
} 

.aside
    {
         float: left; 
         /* overflow:hidden; */
        width: 20%;
        margin-bottom: 1em;
        border:thin royalblue solid;
        background-color:grey;

    }

HTML code:

<div class="aside">
             <div><p>paragraph paragraph paragraph paragraph paragraph paragraphp aragrap hparag raph paragraph</p></div> 

                <ul class="sidebar">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Services</a></li>
                    <li><a href="solar.html">Solar</a></li>
                    <li><a href="#">Hendrer</a></li>
                        </ul>


                </div>