Objects in section can't be resized to fit to section size CSS/HTML

Question

I have created a landing page and have some troubles making it responsive.

I am using scrollify jQuery library so user on click or scroll, skips between sections of my landing page.

When using the mobile version and changing the orientation so it's landscape the objects in my section go over the sections.

Here is one of my sections

.inner2 {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.centerwraper {
  position: relative;
  height: auto;
  margin: 0 auto;
}
.centerdiv {
  margin: 0 auto;
  text-align: center;
}
.coltitle {
  width: 50%;
}

.colimage {
  width: 90%;
}

<section class="panel OriginalCollection" data-section-name="OriginalCollection">
    <div class="inner2">
        <div class="stripe">
            <br>
        </div>
        <div class="centerwraper">
            <div class="centerdiv">
                <img class="coltitle" src="img/original_header.png" />
            </div>
            <div style="width: auto">
                <div class="centerdiv">
                    <img class="colimage" src="img/original_bottles.png" />
                </div>
                <div class="centerdiv">
                    <div style="padding-left: 30px" class="descriptions">
                        <p2>
                            The real MVP of the fruity
                            <br> flavours. Perfect for those
                            <br> looking for a one of a kind taste
                            <br> sensation. A true
                            <br> mouth-watering fruit explosion
                            <br> that your taste buds have
                            <br> been waiting for.
                        </p2>
                    </div>
                    <div style="padding-left: 60px" class="descriptions">
                        <p2>
                            A top secret recipe that can
                            <br> only be described as the daddy
                            <br> of all day vapes. A fruity
                            <br> undertone and a cool crystal
                            <br> after sensation that will leave
                            <br> you wondering what it is...
                            <br> and wanting more.
                        </p2>
                    </div>
                    <div style="padding-left: 80px" class="descriptions">
                        <p2>
                            Packed with one hell of a bite.
                            <br> This flavour is crammed with
                            <br> sweet red cherries blended
                            <br> perfectly with fresh picked
                            <br> forest fruits. The fruity taste is
                            <br> then entangled beautifully with
                            <br> sweet eucalyptus and aniseed.
                        </p2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Also, to get the sections to be the right size, user have to refresh the website is the size changes. E.g. if you have the orientation you have to refresh the page to get the right size of the sections.

Answer 1

for responsive please include the viewport meta tag in the header.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The link which you provide is missing with this tag. This may help you.