Blazor - Padding/Margin Issues with Dynamically created <li> - html

Question

Framework: .Net6.0
C#: 10.0
I'm using the following code, which partly comes comes from: https://www.w3schools.com/howto/howto_css_calendar.asp
<div>
<div class="month">
<ul>
<li>
#DateTime.Today.ToString("MMMM")<br>
<span style="font-size:18px">#DateTime.Today.Year</span>
</li>
</ul>
</div>
<ul class="weekdays">
<li class="border border-secondary">Mo</li>
<li class="border border-secondary">Tu</li>
<li class="border border-secondary">We</li>
<li class="border border-secondary">Th</li>
<li class="border border-secondary">Fr</li>
<li class="border border-secondary">Sa</li>
<li class="border border-secondary">Su</li>
</ul>
<ul class="days">
<li class="border border-secondary">x</li>
<li class="border border-secondary">x</li>
<li class="border border-secondary">x</li>
#for (int y = 0; y < (int)DateTime.Today.StartOfMonth().AddDays(-1).DayOfWeek; y++) {
<li class="border border-secondary"></li>
}
#for (int x = 1; x < DateTime.DaysInMonth(DateTime.Today.Year, DateTime.Today.Month) + 1; x++) {
if (x == DateTime.Today.Day) {
<li class="border border-secondary"><span class="active">#x</span></li>
} else {
<li class="border border-secondary">#x</li>
}
}
</ul>
</div>
The issue comes from the Dynamically created <li> tags.
The ones created manually have a padding which is needed, however when the same <li> tag is created dynamically, there is no padding. Does anyone know why this happens?
EDIT:
#preservewhitespace true at the top of the razor file fixed this issue. Editor shows error, but still compiles and adds all the padding.