position:absolute h1 element overflowing right

I have a container that has all of the following CSS rules (taken from the Chrome dev toolbar):

border-bottom-color: rgb(85, 85, 85);
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(85, 85, 85);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(85, 85, 85);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(85, 85, 85);
border-top-style: none;
border-top-width: 0px;
box-shadow: none;
box-sizing: border-box;
color: rgb(85, 85, 85);
display: block;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 16px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: 100;
height: 680px;
line-height: 25.9200000762939px;
margin-bottom: 0px;
margin-left: 411.5px;
margin-right: 411.5px;
margin-top: 0px;
max-width: 1080px;
padding-bottom: 40px;
padding-left: 60px;
padding-right: 60px;
padding-top: 40px;
position: relative;
text-shadow: none;
vertical-align: baseline;
width: 1080px;

There is a child h1 element with these CSS rules:

h1 {
    font-size: 42px;
    line-height: 42px;
    position: absolute;
    top: 50%;
    top: calc(50% - 21px);
    right: 0;
    text-align: right;
    margin: 0;
    padding: 0;
}

However, the text overspills to the right of the container:

screenshot 1

screenshot 2

How can I ensure that the h1 element snaps to the right hand side of the parent element, without overspilling?

EDIT: The other element, with the iPad image, has the following CSS code:

.ipad {
    width: 251px;
    height: 600px;
    background-image: url(../img/ipad.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: absolute;
    left: 0; top: 0;
}

The HTML is as follows:

<div class="canvas">

    <div class="wrapper normal referrals">

        <div style="position: relative;">

            <div class="referrals fade ipad" data-order="1"></div>

            <h1>Referrals</h1>

        </div>

    </div>

</div>

How is it that the h1 element ignores the parent element’s padding, but the other element does not?


Source: css3

Leave a Reply