CSS sito responsive

[mrknowitall]

Ciao a tutti, vi incollo di seguito il css del mio sito web.
Non ho conoscenze approfondite di HTML, CSS ecc., ho giusto quelle per realizzare un sito web molto semplice, statico.
Qualcuno di voi è in grado di aiutarmi a capire che cosa devo modificare/aggiungere per far si che il sito diventi adatto anche alla navigazione da smartphone e tablet? Perché al momento non lo è proprio
Penso possa c'entrare il width che ho fissato a 1000px ma come/cosa dovrei modificare?
Il sito web è questo: http://www.mrknowitall.it

/* FONT */
@font-face {
   font-family: 'Revolution';
   src: url(Revolution.eot);
   src: local('Revolution'), url('/files/Revolution.ttf') format('truetype');
}

@font-face {
   font-family: 'Coolvetica';
   src: url(Coolvetica.eot);
   src: local('Coolvetica'), url('/files/Coolvetica.ttf') format('truetype');
}


/* BODY */

body {
width: 1000px;
height: auto;
margin: 0 auto;
padding: 20px;
background-color: #000;
color: white;
font-family: Coolvetica, Verdana, serif;
font-size: 18px;
text-align: justify;
}

a {
color: #848484;
text-decoration: none;
}

a:hover {
color: #848484;
text-decoration: underline;
}


/* CSS MENU */

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Revolution;
}
#cssmenu {
  border-bottom: 3px solid #FFF;
  margin: 0 auto;
  padding: 0 5px;
  width: 1000px;
  font-family:  Revolution, Verdana, serif;
  background: #000;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
#cssmenu:after,
#cssmenu ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu ul li {
  display: inline-block;
}
#cssmenu.align-right ul li {
  float: right;
}
#cssmenu.align-center ul {
  text-align: center;
}
#cssmenu ul li a {
  font-size: 18px;
  padding: 15px;
  text-decoration: none;
  color: #FFF;
}
#cssmenu ul li:hover a,
#cssmenu ul li a:hover,
#cssmenu ul li.active a {
  color: #848484;
}
@media all and (max-width: 640px) {
  #cssmenu {
    padding: 0;
    border-radius: 0;
    border: 0;
  }
  #cssmenu ul li,
  #cssmenu.align-center,
  #cssmenu.align-right {
    display: block;
  }
}

.bordotd {
border-bottom: 1px solid #FFF;
}


/* PLAYER */
.audiojs { height: 22px; background: #000; font-family: 'Coolvetica'; font-weight: 500;}
.audiojs .play-pause { width: 15px; height: 20px; padding: 0px 8px 0px 0px; }
.audiojs p { width: 22px; height: 20px; margin: -3px 0px 0px -1px; }
.audiojs .scrubber { background: #5a5a5a; width: 310px; height: 10px; margin: 5px; }
.audiojs .progress { height: 10px; width: 0px; background: #000; 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc));
background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%); }
.audiojs .loaded { height: 10px; background: #000; 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #848484), color-stop(0.5, #848484), color-stop(0.51, #848484), color-stop(1, #848484));
background-image: -moz-linear-gradient(center top, #848484 0%, #848484 50%, #848484 51%, #848484 100%); }
.audiojs .time { float: left; height: 22px; line-height: 22px; }
.audiojs .error-message { height: 22px; line-height: 22px; }

[karl94]

Sicuramente quella larghezza fissa non aiuta, specifica al più la larghezza massima (con max-width).
Vedo comunque che il codice HTML non è messo molto bene: usi elementi deprecati come center e dei br piuttosto che degli appropriati margini via CSS. Dovresti leggere una buona (e recente) guida riguardo i fogli di stile CSS.

[mrknowitall]

Ti ringrazio per la risposta.
Sicuramente dovrei aggiornarmi, le mie conoscenze provengono da autoformazione o risalgono agli insegnamenti scolastici di 7/8 anni fa

Eh sì c'è un bel problema, questo sito non potrà mai essere responsive.
Per costruire un sito responsive dovresti studiare un po' di html5, css3 ma soprattutto bootstrap non si tratta solo di modificare qualche pezzetto di codice è proprio tutta l'"impalcatura" del sito che deve essere costruita seguendo un criterio responsive