I have Html and Css file that they are not match togheter is

I have Html and Css file that they are not match togheter is anybody can fix and help me with that

this is Html file (the Css file is after the Html in bottom)

<!DOCTYPE html>
<html lang=\"en\">
<head>

<body>
   <div class=\"container\">
      <header>
         <h1>
            Happy Flowers
         </h1>
      </header>

      <nav>
         <ul>
            <li><a href=\"#\">Floral Arrangements</a></li>
            <li><a href=\"#\">Seasonal Bouquets</a></li>
            <li><a href=\"#\">Live Plants</a></li>
            <li><a href=\"#\">Shop by Price</a></li>
         </ul>
      </nav>
   </div>

   <article>
      <h2>Place an Order</h2>
      <div id=\"errorText\"></div>
      <form action=\"results.htm\">

<fieldset id=\"message\" class=\"checks\">
<legend>Message</legend>

<input type=\"checkbox\" name=\"\" value=\"\"> Congratulations!
<input type=\"checkbox\" name=\"\" value=\"\"> Happy Birthdy!
<input type=\"checkbox\" name=\"\" value=\"\"> Happy Anniversary!
<input type=\"checkbox\" name=\"\" value=\"\"> I Love you!
<input type=\"checkbox\" name=\"\" value=\"\"> Custom message:
<textarea >Enter custom message here (max 250 characters)</textarea>

          </fieldset>
         <fieldset id=\"billingAddress\" class=\"text\">
   <legend>Billing Address</legend>

<label for=\"fname\">First Name</label>
<input type=\"text\" id=\"\" name=\"fname\">
<label for=\"lname\">Last Name</label>
<input type=\"text\" id=\"lname\" name=\"lname\">
<label for=\"Staddress\">Street Address</label>
<input type=\"text\" id=\"Staddress\" name=\"Staddress\">
<label for=\"city\">City</label>
<input type=\"text\" id=\"city\" name=\"city\">

<label for=\"State\">State</label>
<select>
<option value=\"AL\">Alabama</option>
<option value=\"AK\">Alaska</option>
<option value=\"AZ\">Arizona</option>
<option value=\"AR\">Arkansas</option>
<option value=\"CA\">California</option>
<option value=\"CO\">Colorado</option>
<option value=\"CT\">Connecticut</option>
<option value=\"DE\">Delaware</option>
<option value=\"DC\">District Of Columbia</option>
<option value=\"FL\">Florida</option>
<option value=\"GA\">Georgia</option>
<option value=\"HI\">Hawaii</option>
<option value=\"ID\">Idaho</option>
<option value=\"IL\">Illinois</option>
<option value=\"IN\">Indiana</option>
<option value=\"IA\">Iowa</option>
<option value=\"KS\">Kansas</option>
<option value=\"KY\">Kentucky</option>
<option value=\"LA\">Louisiana</option>
<option value=\"ME\">Maine</option>
<option value=\"MD\">Maryland</option>
<option value=\"MA\">Massachusetts</option>
<option value=\"MI\">Michigan</option>
<option value=\"MN\">Minnesota</option>
<option value=\"MS\">Mississippi</option>
<option value=\"MO\">Missouri</option>
<option value=\"MT\">Montana</option>
<option value=\"NE\">Nebraska</option>
<option value=\"NV\">Nevada</option>
<option value=\"NH\">New Hampshire</option>
<option value=\"NJ\">New Jersey</option>
<option value=\"NM\">New Mexico</option>
<option value=\"NY\">New York</option>
<option value=\"NC\">North Carolina</option>
<option value=\"ND\">North Dakota</option>
<option value=\"OH\">Ohio</option>
<option value=\"OK\">Oklahoma</option>
<option value=\"OR\">Oregon</option>
<option value=\"PA\">Pennsylvania</option>
<option value=\"RI\">Rhode Island</option>
<option value=\"SC\">South Carolina</option>
<option value=\"SD\">South Dakota</option>
<option value=\"TN\">Tennessee</option>
<option value=\"TX\">Texas</option>
<option value=\"UT\">Utah</option>
<option value=\"VT\">Vermont</option>
<option value=\"VA\">Virginia</option>
<option value=\"WA\">Washington</option>
<option value=\"WV\">West Virginia</option>
<option value=\"WI\">Wisconsin</option>
<option value=\"WY\">Wyoming</option>
</select>

<label for=\"zip\">Zip</label>
<input type=\"text\" id=\"zip\" name=\"zip\">
<label for=\"phone\">Phone</label>
<input type=\"text\" id=\"phone\" name=\"phone\">

</fieldset>

<fieldset id=\"deliveryAddress\" class=\"text\">
<legend>Delivery Address</legend>

<input type=\"checkbox\" name=\"\" value=\"\">Same as billing address

<label for=\"fname\">First Name</label>
<input type=\"text\" id=\"fname\" name=\"fname\">
<label for=\"lname\">Last Name</label>
<input type=\"text\" id=\"lname\" name=\"lname\">
<label for=\"Staddress\">Street Address</label>
<input type=\"text\" id=\"Staddress\" name=\"Staddress\">
<label for=\"City\">City</label>
<input type=\"text\" id=\"City\" name=\"City\">

<label for=\"zip\">Zip</label>
<input type=\"text\" id=\"zip\" name=\"zip\">
<label for=\"phone\">Phone</label>
<input type=\"text\" id=\"phone\" name=\"phone\">

</fieldset>

<fieldset id=\"deliveryDate\" class=\"checks\">
<legend>Delivery Date</legend>
<form >
<input type=\"date\" name=\"Ddate\">

</form>

</fieldset>

<fieldset id=\"paymentInfo\" class=\"text\">
<legend>Payment</legend>

<input type=\"radio\" name=\"Card\" id=\"Visa\">
<label for=\"Visa\">Visa</label>
<input type=\"radio\" name=\"Card\" id=\"Master Card\" value=\"\">
<label for=\"Master Card\">Master Card</label>
<input type=\"radio\" name=\"Card\" id=\"Discover\" value=\"\">
<label for=\"Discover\">Discover</label>
<input type=\"radio\" name=\"Card\" id=\"American Express\" value=\"\">
<label for=\"American Express\">American Express</label>

<label for=\"expiry\">Expiration</label>
<select name=\'expireMM\' id=\'expireMM\'>
    <option value=\'\'>Month</option>
    <option value=\'01\'>January</option>
    <option value=\'02\'>February</option>
    <option value=\'03\'>March</option>
    <option value=\'04\'>April</option>
    <option value=\'05\'>May</option>
    <option value=\'06\'>June</option>
    <option value=\'07\'>July</option>
    <option value=\'08\'>August</option>
    <option value=\'09\'>September</option>
    <option value=\'10\'>October</option>
    <option value=\'11\'>November</option>
    <option value=\'12\'>December</option>
</select>
<select name=\'expireYY\' id=\'expireYY\'>
    <option value=\'\'>Year</option>
    <option value=\'17\'>2017</option>
    <option value=\'18\'>2018</option>
    <option value=\'19\'>2019</option>
</select>
<input class=\"inputCard\" type=\"hidden\" name=\"expiry\" id=\"expiry\" maxlength=\"4\"/>

</fieldset>

<fieldset id=\"createAccount\" class=\"text\">
<legend>Create Account</legend>
<p>
To be able to access your purchase history and make changes to your order,
enter a name and password to create an account.
</p>

<form>
<label for=\"Uname\">Username</label>
<input type=\"text\" id=\"Uname\" name=\"Uname\">
<label for=\"Pass\">Password</label>
<input type=\"text\" id=\"Pass\" name=\"Pass\">
<label for=\"Passv\">Password (verify)</label>
<input type=\"text\" id=\"passv\" name=\"passv\">
</form>
</fieldset>

         <div id=\"buttonContainer\">
            <input type=\"submit\" value=\"Place Order\" id=\"orderButton\" />
         </div>
      </form>
   </article>
   <footer>Happy Flowers <span>•</span> Chicago, IL</footer>
</body>
</html>

and this is the Css file

/* apply a natural box layout model to all elements */
* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
   line-height: 1;
   width: 800px;
   margin: 0 auto;
   font-family: garamond, \'times new roman\', times, serif;
   background: rgb(246,245,242);
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: \'\';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

a:link, a:visited {
text-decoration: none;
color: inherit;
}

a:hover {
text-decoration: none;
color: inherit;
}

a:active {
text-decoration: none;
color: inherit;
}

/* container for header and nav */
div.container {
float: left;
}

/* page header */
header {
   border: 2px solid rgb(190,50,38);
   border-right: none;
   padding: 30px 10px;
   text-align: center;
   line-height: 1.8em;
   background: white;
   width: 219px;
   float: left;
   -moz-border-radius-topleft: 10px;
   -webkit-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
   -moz-border-radius-bottomleft: 10px;
   -webkit-border-bottom-left-radius: 10px;
   border-bottom-left-radius: 10px;
}

header h1 {
   font-family: tangerine, cursive;
   font-size: 48pt;
   text-transform: lowercase;
   color: rgb(190,50,38);
}

header h1 img {
display: inline-block;
}

/* remove blank space for descenders below image */
#accent img {
display: block;
}

/* navigation */
nav {
   width: 219px;
   padding: 10px;
   float: left;
   clear: left;
}

nav ul li {
   width: 179px;
   min-height: 50px;
   padding: 10px;
   margin: 0 0 10px 10px;
   line-height: 2.0em;
   font-weight: bold;
   font-size: 16px;
   background: rgb(124,124,136);
   color: white;
   text-align: center;
   border: 1px solid rgb(0,89,132);
}

nav ul li:hover {
background: rgb(0,89,132);
}

/* main content */
article {
   background: #4DA375;
   width: 581px;
   float: right;
   padding: 10px;
}

article h2 {
   font-size: 48px;
   font-weight: bold;
   text-align: center;
   font-family: tangerine, cursive;
   text-shadow: 10px 0px 17px white,
                -10px 0px 17px white;
}

article div.results {
   background: white;
   border-radius: 5px;
   margin: 5px 15px 15px;
   padding: 5px 30px;
}

article h3 {
   font-size: 18pt;
   font-weight: bold;
   text-align: center;
   padding-bottom: 10px;
}

article div.results p {
margin-left: 35%;
padding-bottom: 5px;
}

#errorText {
   display: none;
   text-align: center;
   padding: 10px;
   margin: 0 auto;
   margin: 15px 15px 0;
   background: rgb(124,124,136);
   color: white;
   border: 2px solid rgb(190,50,38);
}

/* form */
form {
   width: 561px;
   margin: 0 auto;
   padding-bottom: 15px;
}

fieldset {
   position: relative;
   padding: 5px 30px 70px 30px;
   background: white;
   border-radius: 5px;
   margin-left: 15px;
   margin-right: 15px;
   margin-bottom: 25px;
}

fieldset:last-of-type {
margin-bottom: 0;
}

legend {
   font-weight: bold;
   font-size: 36px;
   font-family: tangerine, cursive;
   position: absolute;
   padding: 10px 0;
}

input, label, select, textarea, fieldset p, div.errorMessage, #ccNumErrorMessage, #cvvErrorMessage {
   position: relative;
   top: 50px;
   line-height: 1.2em;
}

label, input {
display: block;
}

#expMoLabel, #expYrLabel {
position: absolute;
left: -10000px;
}

#buttonContainer {
width: 100%;
text-align: center;
}

#orderButton {
   margin: 0 auto;
   font-family: tangerine, cursive;
   font-size: 24px;
   top: 15px;
   -webkit-appearance: none;
   display: inline-block;
}

fieldset.checks input, div.checks input {
float: none;
margin-right: 20px;
}

fieldset.checks textarea {
   margin-left: 21px;
   width: 90%;
   height: 50px;
}

fieldset.text label {
   width: 8em;
   text-align: right;
   float: left;
   clear: left;
   margin-right: 10px;
   margin-top: 5px;
}

fieldset.text input, fieldset.text select {
margin-top: 5px;
margin-right: 5px;
}

fieldset div.errorMessage, #ccNumErrorMessage, #cvvErrorMessage {
   display: none;
   color: red;
   margin-top: 10px;
}

#ccNumErrorMessage, #cvvErrorMessage {
margin-left: 8.5em;
}

div.checks label {
   width: auto;
   text-align: left;
   float: none;
   clear: none;
}

div.inline label, div.inline input, div.inline select, div.inline div {
   display: inline-block;
   float: none;
   text-align: center;
   width: auto;
}

div.inline option {
text-align: left;
}

#billFName, #billLName, #delivFName, #delivLName, #billCity, #delivCity, #billPhone, #delivPhone {
width: 15em;
}

#billStreet, #delivStreet, #billEmail, #delivEmail {
width: 20em;
}

#billZip, #delivZip {
width: 10em;
}

#ccNum {
width: 16em;
}

#cvv {
width: 4em;
}

/* footer */
footer {
   width: 581px;
   color: white;
   background: rgb(124,124,136);
   font-size: 16px;
   padding: 10px;
   text-align: center;
   float: right;
}

I have checked your code please eloborate more which CSS is not working ?

Like i have checked header is working fine.

Please share the image that it shoul be like this.