How can i align my items left and shrink them - html

Question

Im currently building a simple resume website but when i try to align my skills bar to left and trying to make them small but couldn't do it how can i do it i searched a little bit but those werent helpful thanks in advance.
* {
font-family: sans-serif;
list-style: none;
padding: 0;
}
.html {
width: 40%;
animation: html 2s;
}
body {
background: burlywood;
}
.skills {
width: 500px;
margin: 60px auto;
color: gray;
}
.skills li {
margin: 20px 0;
}
.bar {
background: gray;
display: block;
height: 2px;
border: 1px solid rgba(0, 0, 0, 0.3);
overflow: hidden;
box-shadow: 0 0 10px rgb(43, 41, 41);
}
.bar span {
height: 2px;
float: left;
background: cyan;
}
.py {
width: 20%;
animation: py 2s;
}
.word {
width: 50%;
animation: word 2s;
}
.excel {
width: 70%;
animation: excel 2s;
}
.c {
width: 59%;
animation: c 2s;
}
<div class="skills">
<h1>Skills</h1>
<li>
<h3>C++</h3>
<span class="bar"><span class="c"></span></span>
</li>
<li>
<h3>Microsoft Excel</h3>
<span class="bar"><span class="excel"></span></span>
</li>
<li>
<h3>Microsoft Word</h3>
<span class="bar"><span class="word"></span></span>
</li>
<li>
<h3>Python</h3>
<span class="bar"><span class="py"></span></span>
</li>
<li>
<h3>HTML</h3>
<span class="bar"><span class="html"></span></span>
</li>
</div>

Answer 1

I think your main problem is how you are setting your margin. Using auto for the right, left values will center it. Try something like this (I also changed your width to percentage but not really clear on what you mean by "make them small")
.skills {
width: 20%;
margin: 60px 0;
color: gray;
font-size: 80%;
}

Answer 2

You haven't wrapped your <li> tags in a <ul (or <ol>) tag, which is an error in the html structure. Read this.
Also, for correct alignment, you can change the margin rule to .skills, and the width. I reduced the width by a factor of 2 = 250px, but you can set your value as the width:
.skills {
width: 250px;
margin: 60px auto 60px 60px;
color: gray;
}
* {
font-family: sans-serif;
list-style: none;
padding: 0;
}
.html {
width: 40%;
animation: html 2s;
}
body {
background: burlywood;
}
.skills {
width: 250px;
margin: 60px auto 60px 60px;
color: gray;
}
.skills li {
margin: 20px 0;
}
.bar {
background: gray;
display: block;
height: 2px;
border: 1px solid rgba(0, 0, 0, 0.3);
overflow: hidden;
box-shadow: 0 0 10px rgb(43, 41, 41);
}
.bar span {
height: 2px;
float: left;
background: cyan;
}
.py {
width: 20%;
animation: py 2s;
}
.word {
width: 50%;
animation: word 2s;
}
.excel {
width: 70%;
animation: excel 2s;
}
.c {
width: 59%;
animation: c 2s;
}
<div class="skills">
<h1>Skills</h1>
<ul>
<li>
<h3>C++</h3>
<span class="bar"><span class="c"></span></span>
</li>
<li>
<h3>Microsoft Excel</h3>
<span class="bar"><span class="excel"></span></span>
</li>
<li>
<h3>Microsoft Word</h3>
<span class="bar"><span class="word"></span></span>
</li>
<li>
<h3>Python</h3>
<span class="bar"><span class="py"></span></span>
</li>
<li>
<h3>HTML</h3>
<span class="bar"><span class="html"></span></span>
</li>
</ul>
</div>

Answer 3

i dont find flex container, you have container with flex and into you can have boxes with flex-start.