I need help fixing my style.css file. bellow is the task that I need to do and the files I created.

 

 

Using the course software, create the first page (home/index page) for your website that demonstrates effective application of design elements based on your website plan.

Include the following:

• A single page named index.html
• Effective use of color, images and font
• Proper page markup language

Save your website page as index.html.

Validate your HTML code using the Markup Validation Service on the W3C^® website, (www.w3.org) prior to submitting your web page(s).

Note: Your website does not need to be fully functional (for example, links may not work yet), but it should open up in a browser and include all design elements. Incomplete portions of the page should include text to indicate what is planned for that area.

Submit your compressed (zipped) files to the Assignment Files tab.

 

html
{ height: 100%;}

body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
  background: #FFFFFF;
  color: #555;}

p
{ padding: 0 0 20px 0;
  line-height: 1.7em;}

img
{ border: 0;}

#main, #logo, #menubar, #site_content, #footer
{ margin-left: auto;
  margin-right: auto;}

#header
{ background: #1589FF;
  border-bottom: 1px solid #3d3d3d;
  height: 186px;}
 
#banner
{  background: transparent url(banner.png) no-repeat;
  width: 860px;
  height: 190px;
  margin-bottom: 20px;
  border: 10px solid #DDD;}

#logo
{ width: 880px;
  position: relative;
  height: 140px;
  background: #1589FF;}

#logo #logo_text
{ position: absolute;
  top: 10px;
  left: 0;}

#logo h1, #logo h3
{ font: normal 300% 'century gothic', arial, sans-serif;
  border-bottom: 0;
  text-transform: none;
  margin: 0 0 0 9px;}

#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover
{ padding: 22px 0 0 0;
  color: #FFF;
  text-decoration: none;}

#logo_text .logo_colour
{ color: #FFFF00;}
#vision{
  color: #ffffff;
}

#logo_text h3
{ font-size: 120%;
  padding: 4px 0 0 0;
  color: #B48A7C;}

#menubar
{ width: 872px;
  height: 45px;
  padding-right: 8px;
  border-top: 1px solid #3D3D3D;}

ul#menu
{ float: right;
  margin: 0;}

ul#menu li
{ float: left;
  padding: 0 0 0 9px;
  list-style: none;
  margin: 8px 4px 0 4px;}

ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
  display: block;
  float: left;
  height: 20px;
  padding: 6px 20px 5px 20px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
  background: #3BB9FF;
}

ul#menu li.selected a
{ height: 20px;
  padding: 6px 20px 5px 11px;}

ul#menu li.selected
{ margin: 8px 4px 0 13px;
  background: #3BB9FF;}

ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #3BB9FF;
  color: #FFF;}
 
ul#menu li a:hover
{ color: #101E28;}

#site_content
{ width: 880px;
  overflow: hidden;
  margin: 20px auto 0 auto;
  padding: 0 0 10px 0;}

#sidebar_container
{ float: right;
  width: 250px;}
 
ul#menu li.logo{
  float: left;}
 
.projects{
  background: #3BB9FF;
  color: #ffffff;}
 
.sidebar_top
{ width: 222px;
  height: 14px;
  background: transparent url(side_top.png) no-repeat;}

.sidebar_base
{ width: 222px;
  height: 14px;
  background: url(side_base.png) no-repeat;}

.sidebar
{ float: right;
  width: 222px;
  padding: 0;
  margin: 0 0 16px 0;}

.box{
  float: left;
  width: 222px;
  padding: 0;
  margin: 0 0 16px 0;}

.sidebar_item
{ background: url('/side_back.png') repeat-y;
  padding: 0 15px;
  width: 222px;}

.sidebar li a.selected
{ color: #444;}

.sidebar ul
{ margin: 0;}

#footer
{ width: 100%;
  font-family: 'trebuchet ms', sans-serif;
  font-size: 100%;
  height: 80px;
  padding: 28px 0 5px 0;
  text-align: center;
  background: #1589FF;
  border-top: 2px solid #2D2D2D;
  color: #FFF;}

#footer p
{ line-height: 1.7em;
  padding: 0 0 10px 0;}

#footer a
{ color: #FFF;
  text-decoration: none;}

#footer a:hover
{ color: #101E28;
  text-decoration: none;}

Attachments:

• 1514124756-banner.png