estoy siguiendo un tutorial para crear mi portafolio sobre diseño web. Estoy siguiendo todo al pie de la letra pero el problema es que no sé como cambiar el tamaño de los contenedores donde va el nombre de cada tecnología
Me gustaría que el tamaño de los rectángulos fuera mas pequeño y no tan alargado hacia el lado derecho
Mi código:
<section class="skills" id = "skills">
<h2 class="section-title">Conocimientos</h2>
<div class="skills__container bd-grid">
<div>
<h2 class="skills__subtitle">PROFE</h2>
<p class="skills__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ipsa vitae fugiat, quos consectetur accusantium unde similique error! Porro velit quis blanditiis facere sequi commodi ad repellat eum ex? Cupiditate!</p>
<div class="skills__data">
<div class="skills__names">
<img src="assets/img/html-5.png" class="skills__icon">
<span class="skills__name">HTML 5</span>
</div>
</div>
el resto de tecnologías - misma estructura
Este es el CSS de los divs
.skills__container{
row-gap: 2rem;
text-align: center;
}
.skills__subtitle{
margin-bottom: var(--mb-2);
}
.skills__text{
margin-bottom: var(--mb-4);
}
.skills__data{
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
font-weight: var(--font-semi);
padding: .5rem 1rem;
margin-bottom: var(--mb-4);
border-radius: .5rem;
box-shadow: 0 4px 25px rgba(14,36,49,.15);
}
.skills__icon{
font-size: 4rem;
margin-right: var(--mb-2);
color: var(--first-color);
}
.skills__names{
display: flex;
align-items: center;
}
width