Div display in odd way - html

Question

I have an authentication panel that looks as follow:
As you can see the red box is displayed to small.
The code behind the source:
HTML
<!-- Add your site or application content here -->
<div class="container">
<div class="message">
<h2 class="title">AUTHENTICATION</h2>
<p class="info">Please sign in with username and password.</p>
<br />
<br />
<div class="ui red message error">Wrong username or password.</div>
</div>
<div class="sign-in">
<form class="ui form">
<div class="field ui big left icon input">
<input type="text" placeholder="Username">
<i class="user icon"></i>
</div>
<div class="field ui big left icon input">
<input type="password" placeholder="Password">
<i class="lock icon"></i>
</div>
<div class="fluid ui blue button">Sign In</div>
</form>
</div>
</div>
CSS
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.message {
display: block;
width: 20%;
height: 25%;
background: #bbd0e6;
font-family: 'Montserrat', sans-serif;
margin-right: 6px;
}
.message, h2 {
color: #FFFFFF;
padding-left: 5px;
padding-top: 5px;
}
.message, .info {
color: #FFFFFF;
padding-left: 5px;
padding-top: 5px;
}
.message, .error {
}
.sign-in {
display: flex;
align-items: center;
width: 15%;
height: 25%;
margin-left: 3px;
}
I tried to set the width of the red box to
.message, .error {
width: 80%;
}
After it changes to:
It seems to be, that the width of the red box is proportional to whole screen not to the AUTHENTICATION box.
How can I determine the width to be proportional to the AUTHENTICATION box?

Answer 1

Try this instead:
.message > error {
width: 80%;
}
When you use , when assigning a style in CSS, you're telling the browser to assign that style to a list of things. Example from your code:
.message {
display: block;
width: 20%;
height: 25%;
background: #bbd0e6;
font-family: 'Montserrat', sans-serif;
margin-right: 6px;
}
.message, h2 {
color: #FFFFFF;
padding-left: 5px;
padding-top: 5px;
}
.message, .info {
color: #FFFFFF;
padding-left: 5px;
padding-top: 5px;
}
That snip defines .message, then redefines it two more times, while also defining h2 and .info. I assume in all cases you're actually trying to get at the children of .message (but I could be wrong). Follow the link for more information: http://www.w3schools.com/css/css_combinators.asp

Answer 2

I solved the problem with:
.message {
display: block;
width: 20%;
height: 25%;
background: #bbd0e6;
font-family: 'Montserrat', sans-serif;
margin-right: 6px;
}
.message > h2 {
color: #FFFFFF;
padding-left: 5px;
padding-top: 5px;
}
.message > .info {
color: #FFFFFF;
padding-left: 5px;
padding-top: 5px;
}
.message > .error {
width: 80%;
}
Thanks everyone.