The screenshot was made in Internet Explorer and I checked all my html and css code and everything looks fine. I opened Firefox and opened same URL and the page was displayed as it should be 400px for the content container . I am new in the web devolvement and trying to get the basics but this is one example when working with different browsers. Internet Explorer ignores “min-height” and always assign it 8em if the container doesn’t contain data. To fix this problem you will need to define addition CSS declaration for the container.

• div#content {
     min-height: 400px;
  }
• * html div#content {
  height: 400px;
  }

or use another solution

• div#content {
     min-height: 400px;
     height:auto !important!;
     height:400px;
  }

Wow this fixed my first problem.