Page specific CSS

Hello,

I have a bit of custom CSS that I’m using on my website. I want this to only be applied to the first page seeing when I add this quick css code. Im not too familiar with applying a page ID but found several threads on the enfold forum that touch base on this. I tried to add some page code but it didn’t seem to work.

Here is my code which I want to applied to my home page (page_id=330 )

@media only screen and (max-width: 767px) {  
  #av_section_1 {
    margin-top: 200px;
  }

I tried this but is didn’t seem to work.

@media only screen and (max-width: 767px) {  
  .page-id-330 #av_section_1 {
    margin-top: 200px;
  }

@media only screen and (max-width: 767px)  #page-id-330 {  
   #av_section_1 {
    margin-top: 200px;
  }