<HTML5> Make progress bars flush?

Question

I followed the blog project in the html course which I completed and I added progress bars to "my skills" in an unordered list. The problem is id like the progress bars to all start and finish at the same location so they have a nice clean flush look to them.

Any advice?

Code currently reads as:
<h1>My Skills</h1>
<ul>
<li>HTML/HTML5 <progress min="0" max="100" value="35"></progress></li>
<li>CSS <progress min="0" max="100" value="0"></progress></li>
<li>Javascript <progress min="0" max="100" value="0"></progress></li>
<li>Python <progress min="0" max="100" value="0"></progress></li>
</ul>

Thanks

Answer 1

Add this css rules:

progress {
float:right;
margin-left:1ex;
}
ul {
display:inline-block;
}

... this would make the <ul> as inlined element, so you maybe need to add a <br> after it, regarding what's next content type and expected behaviour ^^
Anyway, without applying 'display:inline-block' to <ul>, you will have <progress> aligned to most right of parent container (default 'display' value for <ul> is 'block' wich means taking whole width available ;))

Answer 2

added a line break for now which looks much better but still looking to make the progress bars flush on the same line as the skill