Help

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>

<In what way does your code behave incorrectly? Include ALL error messages.>
The problem is that I WANT TO animate menu to “300px” after you click on the “theButton” element. As you can see the .menu “left-position” is equal to -300px. I want the menu to be “300px” instead of “-300px” when you click on the “theButton” element.There are no problems showing in the console but it doesn’t works. I don’t know what the problem is.

------------------------------------------------CSS---------------------------------

.menu {
background: url(‘http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png’);
color: blue;
border: dashed;
margin-right: 1000px;
padding-bottom: 300px;
position: fixed;
left: -300px;

}
.para {
background-color: yellow;
color: black;
text-align: center;
}

 .theButton { 
               background-color: white;
			   color: black
  }

---------------------------------JavaScript/JQuery-----------------------

function main() {
('.theButtton').click(function() { (’.menu’).animate({
left: ‘300px’
}, 200)
});
}
$(document).ready(main);

<do not remove the three backticks above>

can you give me your index.html code?

@nabeelarr