Based on your first example image I will assume:
1. You have hidden the standard side-bar Save button, possibly using CSS like the following within your project's Story Stylesheet area.
#menu-item-saves {
display: none;
}
2. Your project's StoryMenu special passage looks something like..
[[Inventory]]
[[Endings]]
[[Achievements]]
[[Erase Progress]]
... and it generated a HTML element structure like the following..
<ul id="menu-story">
<li><a data-passage="Inventory" class="link-internal" tabindex="0">Inventory</a></li>
<li><a data-passage="Endings" class="link-internal" tabindex="0">Endings</a></li>
<li><a data-passage="Achievements" class="link-internal" tabindex="0">Achievements</a></li>
<li><a data-passage="Erase Progress" class="link-internal" tabindex="0">Erase Progress</a></li>
</ul>
You can use the CSS margin property to add a gap between two elements, in your case you want this margin (gap) between the 1st & 2nd <li> element and between the 3rd & 4th <li> element. You can do this by using the :first-child CSS pseudo-class and the :nth-child() CSS pseudo-class to target the 1st & 3rd <li> elements, and by using margin-bottom property. The following CSS demostrates how to do this
#menu-story li:first-child, #menu-story li:nth-child(3) {
margin-bottom: 1em;
}
Unfortunately the above CSS doesn't handle the new issue of how to fix the borders that surround each of the 'buttons', nor does it remove the existing margin (gap) between the Erase Progress and Restart 'buttons'.
The following CSS does all the above.
#menu #menu-story {
border: 0;
}
#menu-story li:first-child {
border-top: 1px solid #444;
}
#menu-story li:first-child, #menu-story li:nth-child(3) {
margin-bottom: 1em;
border-bottom: 1px solid #444;
}
#menu-story li {
border-left: 1px solid #444;
border-right: 1px solid #444;
}
#menu #menu-core {
margin-top: 0;
}