Background covering the whole page (CSS)-CodePudding

I just switched from VSC to Adobe Dreamweaver and i don't know if I should keep it or not; but thats besides the point.

When I try to add a background to some text, it fills the whole screen with the background with the background, and if I try to change the width it only adds on to the background which is filling the whole screen.

I don't know if it's user error, something changed in HTML/CSS overnight or if it's because of the Dreamweaver display box thing on the top of my screen

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="file:///C|/Users/REDACTED/Documents/style.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/comfortaa:n3:default.js" type="text/javascript"></script>

</head>

<body>

    <div >
        <h1>Hello</h1>
    </div>
</body>
</html>

CSS:

@charset "utf-8";
*{
    margin: 0;
    padding: 0;
}

.Container{
    padding: 25%;
    padding-left: 50%;
    padding-right: 50%;
    font-family: comfortaa;
    font-style: normal;
    font-weight: 600;
    color:white;
    background: #00C3FF;
    margin: 0;
    
    


    
}

body{
    background-image: url(http://www.incomeactivator.com/images/freebg5.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}

p.s: let me know if you need a ss of the results i get

CodePudding user response：

Instead of using the class, you can change the texts background color by adding background-color: rgb(255, 236, 139) in the h1 tag

Demo:

YOURTEXT

CodePudding user response：

It should work as expected if you apply the css to the H1 tag:

.Container h1{}

You have used padding property incorrectly. Reference

Correct syntax: padding: top right bottom left

padding:0 50% 0 50%;

So the css should be:

.Container{ margin: 0; }

.Container h1{  
  padding:0 50% 0 50%;
  font-family: comfortaa;
  font-style: normal;
  font-weight: 600;
  color: white;
  background: #00C3FF;
}