/*==============body==================================*/
body{
    width: 870px;
    margin: auto;
    background-color: #52471b;}
.logo{
    margin-top: 20px;
    margin left: auto;
    margin-right: auto;
    padding-left: 400px;
    
}
h1{
    color: #87752d;
    font-size: 20px;
    letter-spacing: 0.01em;
    padding-left: 408px;
    padding-top: 60px;
    margin-top: -50px;
    font-weight: normal;
    background-color: #F2cc10;
    width: 870px;
    height: 100px;
    border-top-color: 2px solid #87752d;
}
nav ul{
    list-style-type: none;
    letter-spacing: 0.01em
        color:#f8ffb0;
}
/*I try to use the color element to change the color but it didn't  work */
nav li {
    display: inline;
    margin:20px;
    font-size: 20px;
    padding-left: 40px;
    font-weight: bold;
    
    
}
/* I try to use the div element here to move my images but I still missing the shadow or border*/

div.awareness{
  display: block;
  margin-left: 0;
  margin-right: auto;
  width: 50%;
}
div.container{
    
    padding: left: 10px;
}
div.teamwork{
  display: block;
  margin-left: auto;
  margin-right: auto;
    margin-top: -330px;
    width: 50%;}
div.conservation{
    display: block
    margin-left:auto;
    margin-right:0px;
    margin-top: -755px;
    padding: 425px;
    width: 50%;}
div.community{
    display: block;
    margin-left: auto;
    margin-right: 0px;
    margin-top: -1408px;
    padding: 650px;
    width: 50%}
}
/*  I created this div thinking I can make the backgroun but I doesn't work*/
div.todo{
    background-color: #f8ffb0;
    width: 870px;
    height: 700px;
}