Add line break between buttons generated in react loop

I a trying to add a line break after a button that is generated in a react loop. I’ve tried adding elements but that has not worked:

<div className="connect-container"> 
  <div>
  {connectors.map((connector) => (
    <button className="metamask-button"
      disabled={!connector.ready}
      key={connector.id}
      onClick={() => connect(connector)}
    >
      {connector.name}
      {!connector.ready && ' (unsupported)'}
      {isConnecting &&
        connector.id === pendingConnector?.id &&
        ' > > >'}
    </button> 
  )) }  
</div>

There should be a space between the buttons. Currently they are stacked without spacing.

Answer

This approach worked, but only by adding margin-bottom:

.connect-container button {
  display: block;
  width: 100%;
  float: none;
  margin-bottom: 10px;
}