I made 2 divs inside container div, and I gave them the element inline block, I wanted them to be side by side. like 1 > 2, not on top of each other.
they look great in my screen size (24inch)
but once the screen size is going down, instead of getting smaller the divs will lay on top of each other

could you help me making them responsive?

html
----

```
<div class="exampleboxcontainermainpage">
    <div class="exampleboxmainpage">
        <h1>create social media Buttons with html and css</h1>
        <br>

        <div class="socialmediacontainer">
            <a href="#" class="fab fa-facebook-square"></a>
            <a href="#" class="fab fa-youtube"></a>
            <a href="#" class="fab fa-google"></a>
            <a href="#" class="fab fa-twitter"></a>
            <a href="#" class="fab fa-instagram"></a>
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br>
    </div>

    <div class="exampleboxmainpage2">
        <div class="exampleinsideboxmainpage">
            <pre class="prettyprint default">
                    <!-- Start of showing code -->
                    <xmp>

                    <div class="socialmediacontainer">
                  <a href="#" class="fa fa-facebook-square"></a>
                  <a href="#" class="fa fa-youtube"></a>
                  <a href="#" class="fa fa-google"></a>
                  <a href="#" class="fa fa-twitter"></a>
                  <a href="#" class="fa fa-instagram"></a>   
                </div>

                    </xmp>

                    <!-- !!!!! End of showing Code !!!!!-->
                </pre>
        </div>

        <button onclick="window.location.href = 'tryyourselfcodes/howto_howto_social_button.php'; " style="left:30px;" class="buttontest">
            Try yourself >>
        </button>
    </div>
</div>

```

css
---

```
.exampleboxcontainermainpage{
padding-left:100px;
}
.exampleboxmainpage {
  background-color: #f3f4fa;
  border-style: unset;
  /* padding: 23px; */
  text-align: center;
  width: 800px;
  height: 400px;
position:relative;
  display: inline-block;
  bottom:24px;
}
.exampleboxmainpage2 {
  background-color: #f3f4fa;
  border-style: unset;
  padding: 31px;
  text-align: center;
  width: 900px;
  height: 400px;
  position:relative;

  display: inline-block;
}
.exampleboxmainpage h3 {
  padding-bottom: 10px;
  display: inline-block;

}
.examplebox button {
  display: inline-block;
  text-align: center;

}
.exampleinsideboxmainpage {
  background-color: black;
  text-align: center;
  width: 700px;
  display: inline-block;

  border-style: unset;
}
.exampleinsideboxmainpage p {
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  color: white;
  overflow-wrap: break-word;
  display: inline-block;

}

```