How to align text inside the box? - css

Question

I created a text and made a boundary around it. Later, I specified the dimensions of the box according to my needs. When I increased the size of the text, it extended outside the box. I even wrote 'text-align:center;' in it's CSS part. Still it is not giving any result.
I've tried text-align:center;
.cards {
display: grid;
grid-template-row: 1fr 2fr 1fr;
margin-right: 50px;
margin-left: 50px;
grid-row-gap: 20px;
}
.main {
grid-row: 2/3;
display: grid;
grid-template-row: 1fr 1fr;
grid-row-gap: 50px;
margin-top: 80px;
}
.upper {
grid-row: 1/2;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
height: 150px;
grid-column-gap: 10px;
}
.name {
color: white;
border: solid 10px #00CED1;
border-radius: 15px;
font-size: 50px;
height: 130px;
padding: 5px;
margin-left: 100px;
grid-column: 1/3;
text-align: center;
}
<div class="cards">
<div class="main">
<div class="upper">
<div class="name">
<h1>
<f style="font-family:'Abril Fatface'">BITS</f>
<g style="font-family:'Antic Didone'">Hack</g>
</h1>
</div>
<div class="year">
<h1 style="font-family:'Asap Condensed'">2019</h1>
</div>
</div>
</div>
</div>
I expect the name BITSHack to be inside the boundry, but it is extending it.

Answer 1

Don't use height: 130px; inside name class.Try this code:
.name{
height: auto;
}

Answer 2

Don't use height at all, the default is set to auto. Also don't use f and g tags, use span. Yuo can wrap both spans with a div and then align the div to the center if you'll the give the container (.name in your case)
display: flex;
align-items: center;
justify-content: center;
.cards {
display: grid;
grid-template-row: 1fr 2fr 1fr;
margin-right: 50px;
margin-left: 50px;
grid-row-gap: 20px;
}
.main {
grid-row: 2/3;
display: grid;
grid-template-row: 1fr 1fr;
grid-row-gap: 50px;
margin-top: 80px;
}
.upper {
grid-row: 1/2;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
height: 150px;
grid-column-gap: 10px;
}
.name {
color: green;
border: solid 10px #00CED1;
border-radius: 15px;
font-size: 50px;
padding: 5px;
margin-left: 100px;
grid-column: 1/3;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
<div class="cards">
<div class="main">
<div class="upper">
<div class="name">
<div>
<span style="font-family:'Abril Fatface'">BITS</span>
<span style="font-family:'Antic Didone'">Hack</span>
</div>
</div>
<div class="year">
<h1 style="font-family:'Asap Condensed'">2019</h1>
</div>
</div>
</div>
</div>

Answer 3

.cards
{
display:grid;
grid-template-row: 1fr 2fr 1fr;
margin-right:50px;
margin-left:50px;
grid-row-gap:20px;
}
.main
{
grid-row:2/3;
display:grid;
grid-template-row:1fr 1fr;
grid-row-gap:50px;
margin-top:80px;
}
.upper
{
grid-row:1/2;
display:grid;
grid-template-columns:1fr 2fr 1fr;
height:150px;
//height: auto;
grid-column-gap:10px;
}
.name
{
color:black;
border: solid 10px #00CED1;
border-radius:15px;
font-size:30px;
height:auto;
padding:5px;
margin-left:50px;
grid-column:1/3;
text-align:center;
}
<div class="cards">
<div class="main">
<div class="upper">
<div class="name">
<h1><f style="font-family:'Abril
Fatface'">BITS</f><g style="font-
family:'Antic Didone'">Hack</g></h1>
</div>
<div class="year">
<h1 style="font-family:'Asap
Condensed'">2019</h1>
</div>
</div>
now try to execute it,your expected result will come.