Selecting "Discard Checkout" appears to modify/break Page snippet

It appears to me that selecting "Discard Checkout" modifies/breaks a Page snippet.

Is it SharePoint, or is it my code?

My objective is to display an ordered list <UL> menu navigation across a few pages, each formatted with some CSS.

I paste my CSS (see below) into a page snippet, and then I paste my <UL> (also see below) into the page body.  This works well and the <UL> is styled until I edit the page, change my mind, and click "Discard Checkout".  The page is then saved and the <UL> does not appear as intended.

To resolve, I have to overwrite my snippet code with the exact same values, re-save, and re-publish.

SNIPPET:

<style>
#nav {
width:100%;
float:left;
margin:0 0 3em 0;
padding:0;
list-style:none;
background-color:#fff19d;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
}

#nav li {
float:left;
}

#nav li a {
display:block;
padding:8px 15px;
text-decoration:none;
font-weight:normal;
color:#f47f69;
border-right:1px solid #ccc;
}

#nav li a:hover {
color:#f47f69;
text-decoration:underline;
background-color:#fff;
}

#wrap {
width:750px;
margin:0 auto;
background-color:#fff;
}

h5 {
font-size:1.5em;
padding:1em 8px;
color:#333;
background-color:#069;
margin:0;
}

#content {
padding:0 50px 50px;
}
</style>

BODY:

<ul id="nav">
   <li><a>Wizard Steps:</a></li>
   <li><a href="/sites/IT/ITPO/Pages/X/1.aspx">Link 1</a></li>
   <li><a href="/sites/IT/ITPO/Pages/X/2.aspx">Link 2</a></li>
   <li><a href="/sites/IT/ITPO/Pages/X/3.aspx">Link 3</a></li>
   <li><a href="/sites/IT/ITPO/Pages/X/4.aspx">Link 4</a></li>
</ul>