pixel size in photoshop different than pixels in HTML / CSS?

I photoshopped a user interface for an app which I want to create. The width of the background of the photoshopped image was 640px and I typed in the app name using 24pt font. The app name took up about 1/3 of the width of the background.

I then created an html page and did

<div id=header'>
    <div id='logo'>
        <h1>appName</h1>
    </div>
</div>

and this was my CSS:

#header {
    width:  640px;
    background-color: red;
}

h1 {
    font-size: 24pt;
}

but when I do this, the app name only takes up like 1/8th of the 640px. Why does the HTML / CSS version look so much smaller compared to the photshop version even when I use the exact same pixels and font?

Note: I am using pt instead of px.