Here is the issue I'm facing:
My challenge involves having an <h1> nested inside a <div>. However, when I apply a border-radius to the <div>, the <h1> appears outside of the div. Below is the code snippet:
<div class="test"><h1 class="text">test</h1></div>
.test{
background: red;
height: 300px;
width: 300px;
border-radius: 150px;
display: inline-block;
position: relative;
}
.test .text{
display: inline-block;
background: green;
margin: auto;
position: relative;
}
For a live demonstration, please visit the following link: