Почему заголовок отображается не правильно?

iframe {
	width: 100%;
	height: 400px; /* Высота по умолчанию */
}

/* Мобильные устройства */
@media (max-width: 768px) {
	iframe {
		height: 300px;
	}
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
	iframe {
		height: 250px;
	}
}