Button, Button's.. their every where

I have tried for weeks to get a button set up like I have added in this picture… Horizontal boxes, vertical boxes… borders and children of those borders to try and get just the words themselves to be the button. If I had hair… I would have pulled it out by now.

The Button picture is what I am trying to accomplish…

Button 2 shows how far I have gotten… but I have troubles. and nothing lines up worth a hoot when I change screen size. I have not even gotten to hover over or when clicked state.

Tree.png shows the layout of WIP:

Here is a brief overview of my thought process:
Using info found at:

Set up Border.  added back ground to Border (Border1)
Added canvas panel.
Added Border as a child to canvas. (Border2)
Dragged Medallion to upper left corner of Child Border (Border2)
Added black background to border2 and set Appearance/tint Alpha channel to .7
All other settings on border2 are left at default.
Added Veritcal box to Border2 (Vert1)
Added child Button to vert1 (Button1)
Added child text block to Button1 with text “button one” under content.
When I add a second Child button to Vert one… they stack up and down.
If I change the vert box to Horizontal box, they go left and left but, I can’t figure out how to lay out button’s like I did in another engine. Please see pic.
Any help would be appreciated

I swear… If I had hair… I would be bald by now… LOL…
Is there a better way to do this?

after you put the border2 in, add a horizontal box first, then put two vertical boxes inside the horizontal box. The horizontal box should space out the two columns you want, then the vertical boxes will put your menu items up and down. Then start adding the elements to the correct vertical box in the column you want.

Dude… that sounds so easy… I worked with Vert boxes… and tried horizontal boxes… never hit me to use both at the same time… You are a GENIUS! Thank you so much for replying.