How to place two cards next to each other in W3.CSS

I want to place the two cards next to each other (horizontally) But currently they are vertically aligned.

That is I want to place the Heading 1 card next to Heading 2 card even though I used some margin it shift only in the same place horizontally not vertically

<div class="w3-container">
            <div class="w3-card-4" style="width:25%; margin-left:30px; margin-top: 20px">
              <header class="w3-container w3-black">
                <h1>**Heading 1<**/h1>
              </header>

            <div class="w3-container">
                <p>some text</p>
            </div>

            <footer class="w3-container w3-black">
                    <div class="w3-container">
                            <p><button class="w3-button w3-grey w3-round-large">a button</button></p>
                    </div>
            </footer>
            </div>
</div>

<div class="w3-container">

                <div class="w3-card-4" style="width:25%; margin-left:35%;">
                  <header class="w3-container w3-black">
                    <h1>**Heading 2**</h1>
                  </header>

                <div class="w3-container">
                    <p>Some text</p>
                </div>

                <footer class="w3-container w3-black">
                        <div class="w3-container">
                                <p><button class="w3-button w3-grey w3-round-large">a button</button></p>
                        </div>
                </footer>
                </div>
</div>

Solution

Change Your HTML like

<div class="w3-row-padding">
    <div class="w3-half">
        <header class="w3-container w3-black">
            <h1>**Heading 2**</h1>
        </header>

        <div class="w3-container">
            <p>Some text</p>
        </div>

        <footer class="w3-container w3-black">
            <div class="w3-container">
                <p><button class="w3-button w3-grey w3-round-large">a button</button></p>
            </div>
        </footer>
    </div>
    <div class="w3-half">
        <header class="w3-container w3-black">
            <h1>**Heading 1**</h1>
        </header>

        <div class="w3-container">
            <p>some text</p>
        </div>

        <footer class="w3-container w3-black">
            <div class="w3-container">
                <p><button class="w3-button w3-grey w3-round-large">a button</button></p>
            </div>
        </footer>
    </div>
</div>

https://www.w3schools.com/code/tryit.asp?filename=G504CWBW4EBX