Change the font-size of a <p> element inside Jumbotron - html

Question

I have a jumbotron, which has a placeholder on top to handle errors on the page. The error has a <p> tag with its own class, and I want to modify the size of the element. However, the in-built paragraph styles of the jumbotron (Bootstrap) seem to override whatever I've set. I don't want to change the global <p> size, just of this particular element.
HTML:
<div class='jumbotron'>
<div class='alert alert-danger alert-dismissible' role='alert' id= "landing-page-error">
<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>×</span></button>
<span class='glyphicon glyphicon-warning-sign' aria-hidden='true'> </span>
<p class = "error-message"> Sign-Up Error </p>
</div>
CSS:
#landing-page-error {
width: 100%;
position: absolute;
top: 0; /* this and the position: absolute has the error message pop up right below the header nav bar in landing page */
height: 10%;
}
.error-message {
font-size: 10px;
}
It's a Rails app, and here's a screenshot of the CSS inside the browser -
Please help me set the size of the <p> tag specifically for the error element. Thank you in advance.

Answer 1

.jumbotron .error-message {
font-size: 14px;
}
if this doesn't work, then try this:
.jumbotron p.error-message {
font-size: 14px;
}
it will effect all the error-messages inside jumbotron without affecting other <p> tags inside your page.

Answer 2

Nothing Problem just close the Div class before P tag
<div class='alert alert-danger alert-dismissible' role='alert' id= "landing-page-error">
<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>×</span></button>
<span class='glyphicon glyphicon-warning-sign' aria-hidden='true'> </span> </div>
<p class = "error-message"> Sign-Up Error </p>