Why does additional border around container appear?

Question

<style>
<div id="container">
<style>
#container {
width:100%;border: 4px solid brown;}
#header_wrap {
width: 95%;border: 4px solid red;}
#header {
width: 50%;border: 4px solid green;margin: auto;}
#content_wrap {
width: 95%;border: 4px solid red;}
#content {
width: 50%;border: 4px solid green;margin: auto;}
</style>

<div id="container">
<div id="header_wrap">
<div id="header">HEADER</div>
</div>
<br/>
<div id="content_wrap">
<div id="content">CONTENT</div>
</div>
</div>

Answer 1

first of all, you have 2 style starting block and only one closing tag. try removing first two lines

Answer 2

here is your code you had specified the border property around the div removed it and some more check this if that's what you need ?

https://code.sololearn.com/WMC22Id7bvbS/?ref=app

Answer 3

or maybe this is not a solution to your questiin. what border is the problem? red, green or black?

Answer 4

you specify border in each one of them and that might be your case. if there is any border that you did not specify, try:
* {
border-width: 0;
}
Add it to Style block and see if something changes