li not left aligning inside ul

Question

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">&#10094;</li>
            <li class="next">&#10095;</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