Make website design more elegant and have better compatibility

This is my very first website which is going to be published online. Along the way it's gonna be a complete website.

Now, firstly, I am a very beginner in this field, and I want to be a good web designer in future. With that being kept in mind, I want to know my weak point in designing and improve that as much as possible. Here, I used HTML 5, code written in Notepad++.

Right now the problem is if I run this site in some older browsers, the page content breaks down and sits one over another. They overlap, though the recent updated browser works fine. That means currently my site isn't smartly designed. Again, with those being said, I need to ask you few question:

-
How can I improve my overall design ( coding)?

-
I have enclosed the whole contents (including header and footer) in a body tag, is it a good idea?

-
I have used so many break statement? How could I avoid it?

-
What are the few things that I have done worst in my coding so that I must change them?*

[NOTE: Even if you suggest me any changing, I want to keep the original output, as I have right now]



`*{box-sizing:border-box;padding:0; margin:0}

/Positioning & styling header text starts/

#wrapper{

display:-webkit-box;
display:-moz-box;
display:-ms-box;
-webkit-box-orient:vertical;

-ms-box-flex:1;

-moz-box-orient:vertical;
-moz-box-flex:1;
-webkit-box-flex:1;
-ms-box-flex:1;
box-flex:1;

width:100%;

-webkit-box-pack:center;
-moz-box-pack:center;
-ms-box-pack:center;
box-pack:center;

}
h1{
text-align:center;
/*
margin-top:55px;
*/

color:green;

border-bottom:2px solid Crimson ;

box-shadow: 2px 2px 2px yellow;

padding-bottom:40px;
padding-top:45px;
font-family:Prisoner SF;

}
.seven{
font-size:37px;
}

/Positioning & styling header text ends/

/positioning the logo starts/
#header_area{
background-image: url('img_akin/7seas.jpeg'),

url('img_akin/7seas.jpeg');

background-repeat: no-repeat,

Prefixes

You're specifying prefixes in the incorrect order. The standard, unprefixed property should be last:

border-radius:7px;
-webkit-border-radius:7px;
-moz-border-radius:7px; 
-ms-border-radius:7px;
-o-border-radius:7px;

You're also specifying prefixes that have never been required by any browser:

-ms-border-radius:7px;
-o-border-radius:7px;

Can I use... is a great resource for seeing what prefixes are necessary. Don't just add random prefixes if you don't need them, that's unnecessary bloat.
Unnecessary IDs

When you have CSS that looks like this:

#t_box1,#t_box2,#t_box3,#t_box4,#t_box5,#t_box6{
padding-top:230px;
}

It is a pretty good indication that you shouldn't be using an id here for styling purposes at all. You should be using a class instead:

.t_box {
    padding-top:230px;
}

Shorthand

Learn to love the shorthand properties:

margin: auto 0.5%; 
/*original ends*/
margin-left:100px;

Should be:

margin: auto 0.5% auto 100px;

Note: margin-top: auto and margin-bottom: auto won't actually do anything unless the element is a flex element. You're probably getting something closer to margin: 0 0.5% 0 100px; as a result.

And...

font-family:Euphemia;
font-size:16px;

Could be...

font: 16px Euphemia;

Flexbox

This is a personal pet peeve of mine: you're using the old Flexbox properties without also using the modern properties:

display:-webkit-box;
display:-moz-box;
display:-ms-box;
-webkit-box-orient:vertical;

-ms-box-flex:1;

-moz-box-orient:vertical;
-moz-box-flex:1;
-webkit-box-flex:1;
-ms-box-flex:1;
box-flex:1;

-webkit-box-pack:center;
-moz-box-pack:center;
-ms-box-pack:center;
box-pack:center;

This will only work in Webkit and Mozilla browsers, and the Mozilla implementation of the original Flexbox properties is super buggy. The correct way to write it is like this:

display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

Marquee?!

Didn't even spot this one until I ran your markup through the validator. It says this element is not allowed as a child element of div elements. Probably isn't allowed to be a child of any element for the doctype you are using.

We are coming soon, please check back later.

Misc.

I have enclosed the whole contents (including header and footer) in a body tag, is it a good idea?

Not only is it a good idea, but it is required. If there is ever a doubt, try removing it and see what the validator says.

I have used so many break statement? How could I avoid it?

What are the few things that I have done worst in my coding so that I must change them?

The excessive use of the
element is probably the worst thing here. As already mentioned, you use margins and/or paddings to increase the space between elements.

StackExchange Code Review Q#68327, answer score: 5