Use flex-basis and max-width to .cardsForhhiae p
That is,
if we take max-width:33%and flex-basis:33% in 3 column per row but here you are used margin and padding so it minus from it.
margin:2% = 4% both right and left margin
padding:20px = 40px both right and left padding
max-width:calc(33% - (4% + 40px));
flex-basis:calc(33% - (4% + 40px));
About flex-basis
The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
About max-width
The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.
About Calc()
The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
Working DEMO
.cardsForhhiae {
display: flex;
flex-wrap: wrap;
justify-content:center;
border-radius: 10px;
}
.cardsForhhiae p {
font-family: 'Roboto', sans-serif;
background-color: #68b0ab;
padding: 20px;
font-size: 20px;
color: #000;
margin: 2%;
border-radius: 10px;
max-width:calc(33% - (4% + 40px));
flex-basis:calc(33% - (4% + 40px));
box-shadow: 0 0 7px 0px;
}
<div class="cardsForhhiae">
<p>
In ultrices pulvinar enim, et faucibus ante bibendum sit amet. Maecenas venenatis mauris sed erat porta imperdiet ut congue eros. Duis porta nec enim eget venenatis. Morbi vestibulum tellus in ornare hendrerit. Phasellus eu turpis sit amet nulla iaculis
efficitur. In nisl nibh, sagittis sed enim eget, finibus malesuada purus. Maecenas gravida tempor condimentum.
</p>
<p>
Vivamus turpis ante, condimentum eget sapien ut, maximus efficitur massa. Aenean eu scelerisque velit, a facilisis lectus. Quisque porttitor accumsan arcu in ullamcorper. In quis elit est. Maecenas blandit dui eget nulla eleifend lacinia. Mauris blandit,
leo id venenatis iaculis, dolor turpis tincidunt ligula, a imperdiet nulla elit et eros. Donec tristique tincidunt risus et finibus. Maecenas laoreet quis enim ut porta.
</p>
<p>
Quisque rutrum aliquam dolor, et vulputate mauris auctor nec. Duis molestie massa sed est efficitur, eget bibendum nisi mollis. Nunc sit amet diam vel nibh malesuada rutrum. Vestibulum libero odio, commodo ac justo vitae, vulputate sodales diam. Donec
ornare tellus sed tortor finibus ultrices. Mauris sit amet convallis lorem. In venenatis, ante ut dapibus convallis, mauris arcu euismod nunc, quis bibendum tellus tortor vitae nunc.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Etiam ullamcorper augue ac dui ullamcorper dapibus. Nulla laoreet nulla nibh. Sed ex mauris, porta eu sapien ut, maximus efficitur neque.
Donec sit amet accumsan erat, venenatis porta libero. Integer aliquam rutrum ligula, nec sagittis arcu euismod eu. Praesent aliquam dictum turpis a rhoncus. Ut cursus, elit vitae scelerisque cursus, lorem urna scelerisque nibh, at venenatis tortor
enim non lectus. Quisque suscipit quis enim ac hendrerit. Integer ultrices maximus nunc, et porta magna mattis ultricies. Integer non vestibulum leo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae mattis nulla, et bibendum mauris. Donec interdum nibh ante. Nullam viverra tellus vitae scelerisque semper. Donec luctus mi nibh. Nunc convallis velit et ante molestie aliquam. Proin
varius volutpat sem, ut blandit justo tincidunt ac. Vestibulum iaculis, nisl eu sollicitudin tincidunt, eros diam laoreet arcu, vel laoreet lectus lacus vel est. Nullam auctor convallis enim id dictum. Vestibulum vestibulum mi id justo interdum dignissim.
Mauris pharetra imperdiet lectus. Maecenas posuere hendrerit fringilla. Nunc sed augue urna. Phasellus et metus nulla. Phasellus sed sollicitudin lacus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae mattis nulla, et bibendum mauris. Donec interdum nibh ante. Nullam viverra tellus vitae scelerisque semper. Donec luctus mi nibh. Nunc convallis velit et ante molestie aliquam. Proin
varius volutpat sem, ut blandit justo tincidunt ac. Vestibulum iaculis, nisl eu sollicitudin tincidunt, eros diam laoreet arcu, vel laoreet lectus lacus vel est. Nullam auctor convallis enim id dictum. Vestibulum vestibulum mi id justo interdum dignissim.
Mauris pharetra imperdiet lectus. Maecenas posuere hendrerit fringilla. Nunc sed augue urna. Phasellus et metus nulla. Phasellus sed sollicitudin lacus.
</p>
</div>
Responsive Flex
Desktop view (3 ITEM per ROW)
iPad View(2 ITEM per ROW)
iPhone View(1 ITEM per ROW)
.cardsForhhiae {
display: flex;
flex-wrap: wrap;
justify-content:center;
border-radius: 10px;
}
.cardsForhhiae p {
font-family: 'Roboto', sans-serif;
background-color: #68b0ab;
padding: 20px;
font-size: 20px;
color: #000;
margin: 2%;
border-radius: 10px;
max-width:calc(33% - (4% + 40px));
flex-basis:calc(33% - (4% + 40px));
box-shadow: 0 0 7px 0px;
}
@media only screen and (max-width:980px){
.cardsForhhiae p {
max-width:calc(50% - (4% + 40px));
flex-basis:calc(50% - (4% + 40px));
}
}
@media only screen and (max-width:640px){
.cardsForhhiae p {
max-width:calc(100% - (4% + 40px));
flex-basis:calc(100% - (4% + 40px));
}
}
<div class="cardsForhhiae">
<p>
In ultrices pulvinar enim, et faucibus ante bibendum sit amet. Maecenas venenatis mauris sed erat porta imperdiet ut congue eros. Duis porta nec enim eget venenatis. Morbi vestibulum tellus in ornare hendrerit. Phasellus eu turpis sit amet nulla iaculis
efficitur. In nisl nibh, sagittis sed enim eget, finibus malesuada purus. Maecenas gravida tempor condimentum.
</p>
<p>
Vivamus turpis ante, condimentum eget sapien ut, maximus efficitur massa. Aenean eu scelerisque velit, a facilisis lectus. Quisque porttitor accumsan arcu in ullamcorper. In quis elit est. Maecenas blandit dui eget nulla eleifend lacinia. Mauris blandit,
leo id venenatis iaculis, dolor turpis tincidunt ligula, a imperdiet nulla elit et eros. Donec tristique tincidunt risus et finibus. Maecenas laoreet quis enim ut porta.
</p>
<p>
Quisque rutrum aliquam dolor, et vulputate mauris auctor nec. Duis molestie massa sed est efficitur, eget bibendum nisi mollis. Nunc sit amet diam vel nibh malesuada rutrum. Vestibulum libero odio, commodo ac justo vitae, vulputate sodales diam. Donec
ornare tellus sed tortor finibus ultrices. Mauris sit amet convallis lorem. In venenatis, ante ut dapibus convallis, mauris arcu euismod nunc, quis bibendum tellus tortor vitae nunc.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Etiam ullamcorper augue ac dui ullamcorper dapibus. Nulla laoreet nulla nibh. Sed ex mauris, porta eu sapien ut, maximus efficitur neque.
Donec sit amet accumsan erat, venenatis porta libero. Integer aliquam rutrum ligula, nec sagittis arcu euismod eu. Praesent aliquam dictum turpis a rhoncus. Ut cursus, elit vitae scelerisque cursus, lorem urna scelerisque nibh, at venenatis tortor
enim non lectus. Quisque suscipit quis enim ac hendrerit. Integer ultrices maximus nunc, et porta magna mattis ultricies. Integer non vestibulum leo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae mattis nulla, et bibendum mauris. Donec interdum nibh ante. Nullam viverra tellus vitae scelerisque semper. Donec luctus mi nibh. Nunc convallis velit et ante molestie aliquam. Proin
varius volutpat sem, ut blandit justo tincidunt ac. Vestibulum iaculis, nisl eu sollicitudin tincidunt, eros diam laoreet arcu, vel laoreet lectus lacus vel est. Nullam auctor convallis enim id dictum. Vestibulum vestibulum mi id justo interdum dignissim.
Mauris pharetra imperdiet lectus. Maecenas posuere hendrerit fringilla. Nunc sed augue urna. Phasellus et metus nulla. Phasellus sed sollicitudin lacus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae mattis nulla, et bibendum mauris. Donec interdum nibh ante. Nullam viverra tellus vitae scelerisque semper. Donec luctus mi nibh. Nunc convallis velit et ante molestie aliquam. Proin
varius volutpat sem, ut blandit justo tincidunt ac. Vestibulum iaculis, nisl eu sollicitudin tincidunt, eros diam laoreet arcu, vel laoreet lectus lacus vel est. Nullam auctor convallis enim id dictum. Vestibulum vestibulum mi id justo interdum dignissim.
Mauris pharetra imperdiet lectus. Maecenas posuere hendrerit fringilla. Nunc sed augue urna. Phasellus et metus nulla. Phasellus sed sollicitudin lacus.
</p>
</div>
`
– Rayees AC Sep 25 '20 at 05:39