Buttons stacked on top of each other?

Question

I have two buttons, that I would like to have one on top, and one on the button of each other, how ever when I went to see how they looked, both buttons were inside of each other, I Cant seem to find the issue, but here's my code.

CSS

body { font-size: 16px; width: 600px; margin: 25px auto;  }

  button {
  color:white;
  display: inline;
  margin: 30px;
  padding: 7px 35px;
  font: 300 150% langdon;
  background: transparent;
  border: 3px solid black;
  cursor: pointer;
} 

button:hover {
  background: #f7f7f7;
  border: 1px solid #8b8b8b;
}

button:active {
  background: #2e2e2e;
  border: 1px solid black;
  color: white;
  }

Answer 1

Currently the buttons show side by side: see this fiddle. If you want the next button on a new line, then use display:block see this fiddle.