Help what just happened

[diablita]

So I was coding a tab code then suddenly, the letters and format became jumbled.
I don't really know what happened and I have been playing detective but I can't figure out what's going on.
What is it?

Spoiler: code here

[div class=box][div class=tabs]
[div=margin-top:-20px;color: #e5e5e5;][div=letter-spacing:11px;text-align:right;][div class=first][fa]fa-window-close-o[/fa][/div][div class=second][fa]fa-window-minimize[/fa][/div][div class=third][fa]fa-window-maximize[/fa][/div][div class=fourth][fa]fa-window-restore[/fa][/div][/div][/div][/div]
[div class="tabsContent tabsContent1"]
murder she wrote 1
[/div]
[/div][div class="tabsContent tabsContent2" style="display: none;"]
[div=margin-left:550px;margin-top:-500pxheight:150px;float:left]
murder she wrote 2
[/div]
[/div][div class="tabsContent tabsContent3" style="display: none;"]
murder she wrote3[/div]
[div class="tabsContent tabsContent4" style="display: none;"]
murder she wrote 4
[/div]

[nobr]
[class name=box]
margin:auto;
width:400px;
border-radius:5px;
height:500px;
background: #1a1a1a;
[/class]

[class=tabs]
color: #fff;
margin: 0px;
width: 400px;
font-weight:bold;
text-align: center;
float:right;
text-shadow:2px 2px 0px #444
[/class]

[class=first]
float:left;
cursor:crosshair;
width:39px;
height:40px;
[/class]

[class=second]
float:left;
cursor:crosshair;
width:39px;
height:40px;
[/class]

[class=third]
float:left;
cursor:crosshair;
width:39px;
height:40px
[/class]

[class=fourth]
float:left;
cursor:crosshair;
width:39px;
height:40px;
[/class]

[class name=first state=hover]
background-color: #840C24;
transition-duration: 0.4s;
border-radius:70px;
[/class]

[class name=second state=hover]
background-color: #840C24;
transition-duration: 0.4s;
border-radius:70px;
[/class]

[class name=third state=hover]
background-color: #840C24;
transition-duration: 0.4s;
border-radius:70px;
[/class]

[class name=fourth state=hover]
background-color: #840C24;
transition-duration: 0.4s;
border-radius:70px;
[/class]

[class=tabsContent1]
background-color: transparent;
height: 400px;
margin-left:0px;
margin-top:0px;
color:#008000;
[/class]

[class=tabsContent2]
position:relative;
background-color: transparent;
height: 400px;
color:#008000;
margin-left:100px;
margin-top:-100px;
[/class]

[class=tabsContent3]
position:relative;
background-color: transparent;
height: 400px;
color:#008000;
margin-left:100px;
margin-top:-100px;
[/class]

[class=tabsContent4]
position:relative;
background-color: transparent;
height: 400px;
color:#008000;
margin-left:100px;
margin-top:-100px;
[/class]

[script class=first on=click]
hide tabsContent2
hide tabsContent3
hide tabsContent4
removeClass slide second
removeClass slide third
removeClass slide fourth
addClass slide first
fadeOut 1000 tabsContent2
fadeOut 1000 tabsContent3
fadeOut 1000 tabsContent4
fadeIn 1000 tabsContent1
[/script]

[script class=second on=click]
hide tabsContent1
hide tabsContent3
hide tabsContent4
removeClass slide first
removeClass slide third
removeClass slide fourth
addClass slide second
fadeOut 1000 tabsContent1
fadeOut 1000 tabsContent3
fadeOut 1000 tabsContent4
fadeIn 1000 tabsContent2
[/script]

[script class=third on=click]
hide tabsContent1
hide tabsContent2
hide tabsContent4
removeClass slide first
removeClass slide second
removeClass slide fourth
addClass slide third
fadeOut 1000 tabsContent1
fadeOut 1000 tabsContent2
fadeOut 1000 tabsContent4
fadeIn 1000 tabsContent3
[/script]

[script class=fourth on=click]
hide tabsContent1
hide tabsContent2
hide tabsContent3
removeClass slide first
removeClass slide second
removeClass slide third
addClass slide fourth
fadeOut 1000 tabsContent1
fadeOut 1000 tabsContent2
fadeOut 1000 tabsContent3
fadeIn 1000 tabsContent4
[/script]
[/nobr]

 

[Alteras]

i recommend making the [nobr] tag include your divs to make it clean, that way you don't have to do negative margins. And move everything into the box div.