I need to move the border with the text. The padding only moves the text not the border
{{#each spacing}}
<span class='p-2'>
{{business}} ({{Count}})
</span>
{{/each}}
.p-2{
border: 1px solid #D8DADA;
margin: 0 12px 0 0;
padding: 10px 0 8px 30px !important;
}
If I understand you correctly, you are trying to move the button elements in their entirety, and not just their contents. I'm assuming you want to move them to the right.
To do this, wrap the contents of the buttons in a div, and give that div margin-left:30px.
CSS
.button-container {
margin-left:30px;
}
.p-2{
border: 1px solid #D8DADA;
margin: 0 12px 0 0;
padding: 15px 0 8px 15px !important;
}
HTML
<div class='button-container'>
<button class='p-2'></button>
<!-- and so on.. --->
</div>