I am making a very basic webpage, consisting of some text inside a fixed width. Here is some example html

```
<div id ="wrap">
    <h1>An Annoying Heading</h1>
    <p>Some text some text some text some text some text some text some text some text some text some text</p>
</div>

```

That is the only thing within the body tags. The CSS is

```
*{
  padding: 0;
  margin: 0; 
}    
#wrap{
  width: 320px;
  margin: 50px auto;
}
body{
  font-family: calibri,tahoma,arial,sans-serif;
}
p{
  text-align: justify;
  font-size: 12pt;
  padding-top: 0.4em;
}
h1 {
  padding-bottom: 0.1em;
  font-size: 26pt;
}

```

I want the heading to take up the full width available.

I can specify the size of the font to approximately match the width of the div, which usually works fine.

However, if the browser cannot use calibri it looks at the font-family to decide what to use instead. Annoyingly, the next fonts are displayed as a bigger size to calibri and the heading is split over two lines instead of one.

Is there a way to ensure the heading takes up the full width available and remains on a single line irrespective of the font used?