li not left aligning inside ul [duplicate] - css

Question

This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 1 year ago.
I've seen other posts similar to this but they didn't seem to provide a solution. I'm kaing a js calendar and the days are inside a however I cannot get the items to align left, it seems like they are padded on the left side see img below.
I am hoping someone can tell me if theres a way to remove this ghost padding?
many thanks :)
I have included my current code and the css classes I'm currently using. I have a few vue inline styles but
<!--jan-->
<div v-if="month==1" class="month">
<div>
<div>
<b>January</b><br><span> {{this.year}}</span>
</div>
<div>
<ul v-bind:style="{ 'display': 'flex', 'justify-content':'space-between'}">
<li class="prev">❮</li>
<li class="next">❯</li>
</ul>
</div>
</div>
<ul class="weekdays">
<li class="days">Mo</li>
<li class="days">Tu</li>
<li class="days">We</li>
<li class="days">Th</li>
<li class="days">Fr</li>
<li class="days">Sa</li>
<li class="days">Su</li>
</ul>
<ul class="daysList">
<li class="daynum">1</li>
<li class="daynum">2</li>
<li class="daynum">3</li>
<li class="daynum">4</li>
<li class="daynum">5</li>
... etc
</ul>
</div>
<!--jan-->
////css//////
.daysList{
width: 100%;
list-style: none;
display: flex;
flex-wrap: wrap;
text-align: left;
justify-content: left;
background: rgb(231, 131, 131);
}
.daysList li{
background-color: lime;
display: inline;
margin: .5em;
width: 22px;
padding: 5px;
}
.daysList li:hover{
cursor:pointer;
color:white;
background-color: blue;
}

Answer 1

The <ul> has some margin and padding added by the user agent stylesheet. You can remove them from your calendar component's <ul>s with:
<style scoped>
ul {
margin: 0;
padding: 0;
}
</style>
demo