El ancho de los elementos puede regularse utilizando la propiedad width. La propiedad width acepta varios tipos de valores

• Auto: el valor es calculado automaticamente por el navegador. En la mayoria de los casos el navegador asocia el valor auto con la totalidad del viewport, es por eso que es recomendable usar esta propiedad cuando queremos que algo ocupe toda la pantalla.
• Medida: esta propiedad acepta cualquier tipo de medida. Para mas informacion ver medidas.
• Porcentaje: Se puede utilizar porcentajes para decir cuanto debe ocupar de ancho un elemento. No es una buena practica
• Initial
• Inherit

ATENTI

El width de un elemento no tiene en cuenta el border, padding o margin de los elementos.

Regular el ancho maximo que tendrá un elemento

Muchas veces ademas del ancho queremos regular hasta cuando podrá crecer un elemento a medida que agrandemos la pantalla o que el viewport sea mas grande (pasar de telefono a tablet, de tablet a pc y de pc a televisor, por ejemplo). Para eso existe la propiedad max-width: la misma permite regular cuanto queremos que crezca un elemento. Un ejemplo:

Tengo el menu de mi restaurante y quiero que crezca como maximo 500px. Para eso le paso la siguiente propiedad

max-width: 500px;

Grabación de pantalla 2022-09-16 a la(s) 19.06.59.mov

Como se puede ver en el video, el menu se agranda hasta que llega a los 500px. A partir de ahi lo que se agranda es el resto de la pagina (el background) mientras que el menú queda intacto en la misma dimensión.