¿Cómo uso correctamente las consultas de @media? - html, css, twitter-bootstrap

El diseño de mi sitio web actual: Captura de pantalla 1

Usé un div con una identificación de envoltura para centrar el sitio:

#wrap {
width: 70%;
margin: 0 auto;
}

pero ahora, obviamente, también lo hace con un 70% de ancho en dispositivos móviles, lo que se ve mal: SC2

Intenté usar consultas de medios, la demax-device-width especificado por sí mismo y también los que están en el sitio web bootstrap en la sección CSS, cada vez que usé alguno de ellos eliminé el código css original de #wrap, pero nada funcionó, mi sitio web solo iría a siendo 100% en todos los dispositivos e incluso si lo hice en un 70% en dispositivos móviles (solo como una prueba) seguía siendo el mismo en todas partes, como si no hubiera ningún código css para la identificación de ajuste.

Lo siento si es una pregunta tonta, simplemente estoy perdido y realmente quiero hacer que mi sitio sea 100% en un cierto punto de interrupción (tableta-móvil).

Respuestas

Prueba esto:-

@media (min-width: 768px)  {
.mymenu {
width: 20%;
}
}