Column CSS with Margin and Width Percentage

Hi. Sorry if this is a super simple question. I have some very simple CSS I am applying to columns, as I’m styling them as individual file download boxes. My css works fine:

.download-box {
border: #dddddd 1px solid;
background-color: #efefef;
border-radius: 10px;
padding: 15px;
margin: 15px;
}

However, if I add margin to the CSS, Beaver Builder doesn’t factor that in when it sizes the columns width. So for example, I am trying to do 3 columns at 33.33%, but the 3rd box drops below the first 2 boxes, because it’s too wide due to the margin (see picture). In contrast, if I manually style all 3 columns in BB and apply the margin that way, they are properly sized and fit in the same row.

Do I need to change my CSS class selector or is it not possible for BB to resize column width when margin is applied this way?

Thank you!