Text mis-aligning


I've been looking over this for some time. I'm trying to simply centre some text and a button in a menu. My css is:

  text-align: center;
  text-align: center;
  border:2px solid rgba(0, 0, 0, 0.2);
  margin: 2em 0em 2em 0em;
  padding: 0.5em 0.5em 0.5em 0.5em;
My page code looks like there attached. My result is attached and the appearance on the builder is there too. Obviously the css should centre it, but there is currently a new line between the text and the two buttons and this disappears when I apply the CSS. Any ideas please?
HTML on page:![](upload://dtaZ0eO96WM1rRo35B4kgwCmMSN.png)

Setup in builder with new line between text and buttons: