I can't move up an element inside a Bootstrap modal - html

Question

For some reason, I can't move up an element inside a Bootstrap modal, along some others.
Here:
Specifically the Hardware/Software extra part. Look how down it is! In the CSS it is named like:
.hardsoft-xtra
I already tried:
padding-top
margin-top
!important
My CSS specifications for the panel and how I organized it:
/*Comienza los modals con las características GENERALES (class)*/
/*Este es en general donde se mete todo*/
/*Los #media hacen responsivos a los modals*/
.caracs{
width: 460px !important;
font-family: 'Poppins', sans-serif;
}
#media (min-width: 768px) { .caracs{
width: 500px !important;
font-family: 'Poppins', sans-serif;
} }
#media (min-width: 992px) { .caracs{
width: 810px !important;
font-family: 'Poppins', sans-serif;
} }
#media (min-width: 1200px) { .caracs{
width: 810px !important;
font-family: 'Poppins', sans-serif;
} }
/*No jala*/
.caracs > ul{
text-align: left;
}
/*div izquierdo*/
.nombre-datos{
display: inline-block; /*Necesario para que los divs estén en el mismo renglón*/
width: 250px !important;
font-size: 0.8em;
text-align: justify;
}
.valoracion{
height: 35px;
background-color: orange;
color: white;
padding-top: 8px;
padding-left: 10px;
font-size: 1.5em !important;
}
.filtros{
padding-top: 5px;
font-size: 1.2em;
}
/*div-derecho*/
.mas-datos{
vertical-align: top; /*Necesario para que el 2° div a la derecha comience desde arriba*/
display: inline-block;
}
.so{
display: inline-block;
width: 235px;
background-color: #f2f2f2;
text-align: justify !important;
}
.hardsoft-xtra{
display: inline-block;
width: 275px;
text-align: justify !important;
}
.nivel{
background-color: #dbdbdb;
text-align: justify !important;
}
/*Terminan los modals con las características GENERALES (class)*/
How can I move it up so it gets aligned with Sistema operativo?
Here is the HTML code. Consists of a clickable Bootstrap panel, which opens a modal specific to that one:
<div class="container">
<div class="row">
<a href="#modal2" data-toggle="modal" data-target="#modal2">
<div class="col-sm-8 col-md-offset-2">
<div class="panel panel-default buscadoresInternet sinInternet" id="app1">
<div class="panel-heading">
Google
</div>
<div class="panel-body apps">
<div class="imagen">
<img src="media/buscadoresInternet/google.png" alt="Google">
</div>
<p>El buscador de Google o buscador web de Google (en inglés Google Search) es un motor de búsqueda
en la web propiedaad y el principal producto de Alphabet Inc., es el más utilizado en la
Web, recibe cientos de millones de consultas cada día a través de sus diferentes servicios.
El objetivo principal del buscador de Google es buscar texto en las páginas web, en lugar
de otro tipo de datos.
</p>
</div>
</div>
</div>
</a>
</div>
</div>
<!--Modal de Google-->
<div class="modal fade" id="modal2" role="dialog">
<div class="modal-dialog caracs">
<div class="modal-content">
<div class="modal-body">
<div class="nombre-datos">
<img class="imagen-modal" src="media/buscadoresInternet/google.png" alt="Bing">
<p><b>Google</b> es sin duda el mejor buscador actualmente, ya que mantiene estrictos estándares de
calidad a lo largo de sus productos y permite una búsqueda sumamente personalizada.</p>
<p class="text-right">Usar ahora</p>
<div class="valoracion">
<p>Valoración: <b>10</b></p>
</div>
<div class="filtros">
<p>¿Requiere internet?: <b>Sí</b></p>
<p>¿Gratuito?: <b>Sí</b></p>
<p>Pagos integrados: <b>No</b></p>
</div>
</div>
<div class="mas-datos">
<div class="so text-center">
<p>Sistema operativo</p>
<ul>
<li>Windows</li>
<li>OSX</li>
<li>Linux</li>
<li>Android</li>
<li>iOS</li>
</ul>
</div>
<div class="hardsoft-xtra text-center">
<p>Hardware/Software extra</p>
<ul>
<li>Un navegador web (prueba buscando uno en este mismo catálogo).</li>
</ul>
</div>
<div class="nivel text-center">
<p>Nivel educativo</p>
<ul>
<li>Primaria</li>
<li>Secundaria</li>
<li>Preparatoria</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Fin del modal de Google-->

Answer 1

Set vertical-align as top for them.
vertical-align:top;