/*this is my style sheet for project 3*/

body{
  background-color: #c41052;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}


#container {
  min-width: 700px;
  width: 80%;
  margin: auto;
  color: black;
  background-color: #ff6363;
  font-family: calibri, arial, sans-serif;
  overflow: hidden;
  /*while content in navare floating they are pulled from the flow
  of the site, if a footer is added,it will triggerthe box size.
  Aother way without a footer is overflow. this is a trick to contain the elemtents within.*/
}


#content {
  font-family: calibri, arial, sans-serif;
  Background-color: #ff8f00;
  float: left;
  /*with no difined width it will take up all the space it can*/
  width: 72%;
  padding-left: 5px;
  height: 300px;
}


#nav {
  font-family: calibri, arial, sans-serif;
  Background-color: #c41052;
  float: left;
  width: 25%;
  padding-left: 5px;
  padding-right: 5px;
  height: 300px;
  }
  
  
#nav ul{
 padding-left: 20px;
 list-style: none;
}


footer {
  clear: both;
}