Как растянуть div со всем содержимым на всю ширину окна

Появилась потребность растянуть блок на всю ширину экрана. Структура блока:

.wrap{ 
    display: inline-block; 
} 
.wrap span{ 
    padding: 1vw; 
    background: #000; 
    color: #fff; 
    font-size: 2.5vw; 
    font-family: Arial; 
}

<div class='wrap'> 
    <span>hello world!</span> 
</div>

При этом изменять размер шрифта или какие либо свойства дочерних элементов div.wrap нежелательно, либо делать это как-то пропорционально. Ниже нарисовал схему как есть сейчас и как должно получится в итоге.

Если с картинками все понятно, как и какими методами их растягивать, то вот с блоками я информации не нахожу. Буду благодарен за вашу помощь в этом вопросе.