h6 Spacing Help in page

Hey folks.

I was trying to find a way to provide bold links for one of my pages that would be easily updated and decided that since the h6 tag wasn’t being used by my wordpress page in anyway I would use them with some custom edits.

At first I got the standard h6 bottom margin, with about 25/30 pixels on the bottom all stacked on top of one another. I added a display: inline to my stylesheet which solved the problem and had them sitting next to one another. However, after I added more than 5 or so links they started overlaying one another.

http://justavisual.net/2013/?page_id=25

Here is my stylesheet code for the h6

h6 {
	font-family: Lucida Grande, Geneva, Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #FFFFFF;
	padding-top: 3px;
	padding-bottom: 3px;
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
        display: inline;
        margin-bottom: 10px;

}

h6 a {
	font-family: Lucida Grande, Geneva, Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #FFFFFF;
	padding-top: 3px;
	padding-bottom: 3px;
        padding-left: 5px;
        padding-right: 5px;
        background-color:#000000;
        margin-bottom: 10px;
}

h6 a:hover {
	font-family: Lucida Grande, Geneva, Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #000000;
	padding-top: 3px;
	padding-bottom: 3px;
        padding-left: 5px;
        padding-right: 5px;
        background-color:#cccc00;
        text-decoration: none;
        margin-bottom: 10px;
}

As you can see I thought that adding a margin-bottom tag might help the problem but I’m sort of out of ideas. Anyone have a good solution for this?

Thank you in advance.