I have created two buttons in the code snippet below with the same width, but I'm struggling to add a gap between them. This issue persists in the mediaquery version for mobile as well. How can I solve this?
.flex-container {
display: flex;
justify-content: center;
margin: 1em;
}
.flex-container .flex-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.flex-item {
height: 1.7rem;
padding: 0 1.2rem;
width: 100%;
}
.item1{
margin-right:1vw; /*not functioning as expected*/
}
@media only screen and (max-width: 480px) {
.flex-container .flex-container{
display:flex;
flex-direction: column;
}
}<div class="flex-container">
<div class="flex-container">
<button class="flex-item item1">Button1</button>
<button class="flex-item">Button2 really long with same width</button>
</div>
</div>