CSS属性不适用于嵌套div

Question

I'm trying to create a <div> within a <div> that sits like this

Both containers should have a nice amount of height to them, for some reason when I put the <div> within the <div> it breaks the height and some of the other CSS properties so everything ends up looking squashed.

Is #masthead_topbar inheriting something from the parent <div> or do I need to change something else?

The Code:

 #container { width: 951.8px ; height: 600 px ; background-color: #c2c2c2 ; border: solid 1px ; border-color: b8b8b8 ; margin: 0 auto ; display: flex ; align-items: center ; } #masthead_topbar { width: 929px ; min-height: 47.00 px ; max-height: 47.00 px ; background-color: #c2c2c2 ; border: solid 1px ; border-color: b8b8b8 ; margin-left: 10px ; margin-right: 10px; margin-top: 10px ; } 

 <div id="container"> <!-- Start Masthead TopBar --> <div id="masthead_topbar"> <font>Test</font> <!-- End Masthead_TopBar --> </div> <!-- End Container DIV --> </div> 

Answer 1

you have a couple of mistakes, such as:

• a space in lengths such as 600 px
• not using # in border-color (you can use border shorthand)

Note this:

• don't use decimal values in px length.
• don't use font , it is deprecated.

here is a working example:

 .container { max-width: 950px; /* changed for demo */ height: 150px; /* changed for demo */ border: solid 1px #b8b8b8; margin: 0 auto; display: flex; align-items: center; } .masthead_topbar { width: 100%; border: solid 1px #b8b8b8; margin: 10px 10px 0; padding: 10px; } 

 <div class="container"> <!-- Start Masthead TopBar --> <div class="masthead_topbar"> Test <!-- End Masthead_TopBar --> </div> <!-- End Container DIV --> </div> 

Answer 2

well , you just have to remove the space between 600 px ; to be 600px; :) maybe some other things need to be fixed also (the codes between stars ** ** edited ) :

#container {
  width: 951.8px ;
  **height: 600px ;**
  background-color: #c2c2c2 ;
  **border: 1px solid #b8b8b8 ;**
  **border-color: #b8b8b8 ;**
  margin: 0 auto ;
  display: flex ;
  align-items: center ;
}
#masthead_topbar {
  width: 929px ;
  **min-height: 47.00px ;
  max-height: 47.00px ;**  
  background-color: #c2c2c2 ;
  **border: 1px solid #b8b8b8 ;
  border-color: #b8b8b8 ;**
  margin-left: 10px ; 
  margin-right: 10px;   
  margin-top: 10px ;
}