HTML & CSS Newbie with css class problems

[bryanb]

I want to apply a class to a div. like this:

<!doctype HTML>
    <html lang="en">
    <head>
    
    <title>Module 2 Project </title>
        
  <link href="assignment1.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>

<div class="row"> <!---row starts--->
   <div id="container"> <!---container start--->
           <div id="chicken" class=".col-lg-4 .col-md-6 .col-sm-12">
        
        <div id="title">
       Chicken
        </div>
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium ultricies lacus, id mollis erat posuere non. Maecenas fermentum turpis vel sem volutpat, eget semper dui sodales. Pellentesque vitae erat lorem. Mauris tempor nisi ac ex. </p>
        </div> <!---chicken ends--->

But those classes (.col) are not applying. here is the css

*{
  box-sizing: border-box;
}
/* Simple Responsive Framework. */
.row {
  width: 100%;
}


#container {
        width: 100%;
        height: 500px;
        overflow:auto;
    }
    
    #chicken {
    
        height: 200px;
        float: left;
        background-color: gray;
        margin: 1%;
        overflow:auto;
  }
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;   
  }
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 74.99%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

I'm lost and this is an assignment so any feedback would be great thank you very much.

 

[bryanb]

I deleted the extra div/ its mainly the media query framework just wont apply.