I want to align main content on my website. My page looks like the code below. The third div is the one that I don’t have control. Especially padding, I can’t change it. How can I align all divs so they align at the same line vertically?
.main-content {
margin: 0 auto;
display: grid;
gap: 12px;
max-width: 400px;
padding: 0 12px;
border: 2px solid red;
}
.element-with-padding-that-cannot-be-changed {
padding: 0 12px;
}<div class="main-content">
<div>Element 1</div>
<div>Element 2</div>
<div class="element-with-padding-that-cannot-be-changed">Element 3</div>
</div>