<ol> still keeping some vertical space while list-style: none - html

Question

still keeping some vertical space while list-style: none is defined.
https://product-landing-page.freecodecamp.rocks/#how-it-works
If you check this project and scroll to pricing labels there is defined exactly like mine and it behave differently.
My price label:
Project's label
MY CSS:
/* ========== PRICE ======= */
#cost {
display: flex;
flex-direction: row;
justify-content: center;
}
.price-box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: calc(100% / 3);
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
}
.lvl {
background-color: #dddddd;
text-align: center;
font-size: 1.4em;
color: rgb(65, 65, 65);
padding: 5px;
width: 100%;
}
#cost ol li {
padding: 5px 0;
margin: 0;
}
li {
list-style: none;
}
Project's CSS:
#pricing {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: calc(100% / 3);
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
}
.product > .level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
text-transform: uppercase;
font-weight: 700;
}
.product > h2 {
margin-top: 15px;
}
.product > ol {
margin: 15px 0;
}
.product > ol > li {
padding: 5px 0;
}
Maybe someone can explain it to me so i can understand what is happening here

Answer 1

If you look at all the CSS that is being applied to that ol element you'll notice that there is a setting of everything (*) which includes padding: 0;
This overrides the browser's default settings for padding related to ol elements.
You may or may not want to set padding: 0 for everything at the start. It depends on your precise use case.
As in the case of the site you reference, something like this can be seen at the top of some stylesheets - meaning the author will add any padding and margin settings themselves rather than relying on default browser settings.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
[The box-sizing setting means e.g. padding and border dimensions are included in the dimensions of the element].
If you don't want such a global approach to unsetting padding then put the padding: 0 in the style setting for the ol element itself. For example: [I can't tell exactly what this should be as I don't know your HTML stucture]
#cost ol {
padding: 0;
}

Answer 2

Just add padding: 0
ul, ol {
list-style:none;
padding:0;
}