Position relative overwrites background colour

Question

I have two questions, why does the position relative make the part where the h1 header is white even thought the background colour is blue?

How would I center this element so it's always centered no matter on the screen size?

<h1 id="maintitle">Find your new css!</h1>

html {
    background-color: rgb(171, 248, 235);
    font-family: sans-serif,Tahoma, Verdana, 'Times New Roman';
}

h1#maintitle {
    position: relative;
    margin: 0 0 0 0;
    width: 400px;
    padding: 10px;
    width: 50%;
    top: 50%;
}

https://jsfiddle.net/hbudyxkq/1/

there is a configuration on the jsfiddle that add the white background — Temani Afif, Jan 16 '19 at 21:30
check your configuration then. If you inspect the element you will notice that there is a background color set to the body element — Temani Afif, Jan 16 '19 at 21:43

score 0 · Answer 1 · answered Jan 16 '19 at 21:40

0

body {
    background-color: rgb(171, 248, 235);
    font-family: sans-serif,Tahoma, Verdana, 'Times New Roman';
}

h1#maintitle {
 
    margin: 0 0 0 0;
    text-align: center;
    
}

<h1 id="maintitle">Find your new css!</h1>

answered Jan 16 '19 at 21:40

Mihai Constantin

1
2

Position relative overwrites background colour

1 Answers1