Why is the inner div comming out of the parent div in this CSS?

HTML:

<div id = 'content'>      <div id = 'room'></div>      <div id = 'room-list'></div>      <div id = 'messages'></div>        <form id = 'send-form'>          <input id = 'send-messsage'/>          <input type = submit id = 'send-button' value = 'Send'/>            <div id = 'help'>              Chat commands:              <ul>                  <li>Change nickname: <code>/nick [username]</code> </li>                  <li>Join/create room: <code>/join [room name]</code> </li>              </ul>          </div>        </form>    </div>  

CSS:

body {      padding: 50px;      font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;  }    a {      color: "#00b7ff"  }    #content {      background-color: aquamarine;      width:          800px;      height:         300px;      margin-left:    auto;      margin-right:   auto;      border:         2px solid blueviolet;  }    #room {      background-color:burlywood;      margin-bottom: 1em;  }    #messages {      width:          690px;      height:         300px;      overflow:       scroll;      background-color:cadetblue;      margin-bottom:  1em;      margin-right:   10px;      border:         2px solid blue;  }  

Results in:

Please explain why is the inner rectangle coming out and what can be done to prevent it?

https://stackoverflow.com/questions/66147903/why-is-the-inner-div-comming-out-of-the-parent-div-in-this-css February 11, 2021 at 10:18AM