Is it silly of me to ask this question? I haven't found a satisfactory answer anywhere, so I'll ask anyway.
I'm working on creating a responsive webpage where I need to set the padding of a div named content that contains another div called text. This content div is inside a container element with predefined height, width, and position: relative properties. The issue arises when I set padding: 45% 45%; - it works fine for width but overflows the parent container in terms of height.
.container
{
box-sizing: border-box;
position: relative;
border: 1px;
height: 100px;
width: 600px;
margin:0 auto;
}
.content{
background-color: skyblue;
padding: 43% 43%;
}
#textlogo {
font-size: 4em;
}<div class="container">
<div class="content">
<div id="textlogo">Text</div>
</div> </div>