Hello, Can someone please help me keep the list centered on the page, while making the first and last item stretch to the end of the screen. Is that possible?

HTML Code:
<!-- stretched width of left margin-->
<li id="first" style="background-color:green;width: 100%;">
<a href="#">First </a></li>
<!-- centred fixed width-->
<li id="second" style="background-color:yellow;width: 220px;">
<a href="#">Second</a></li>
<!-- centred fixed width -->
<li id="third" style="background-color:red;width: 220px;">
<a href="#" >Third</a>
</li><!-- stretched width of right margin-->
<li id="fourth" style="background-color:blue;width: 100%;">
  <a href="#">Fourth</a>
</li>
Many thanks in advance