How can I get this to fit the screen? - html

Question

As the title says, I'd like the "background" element to fit the side of the screen (you can see it doesn't go all the way to the right), as well as to go all the way to the bottom of the screen. Can anyone help?
The code can be seen here: codepen
(specifically these elements)
```
.background {
background: url("https://static.kent.ac.uk/nexus/ems/50.jpg");
border: 3px solid black;
margin: 0 auto;
}
.text {
margin: 0 30px 0 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
height: auto;
}
.text p {
margin: 5%;
font-weight: bold;
color: #000000;
opacity: 1;
}
```

Answer 1

Setting margin: -20px; on the <header> pulls it out of the page, and with that creating the horizontal scroll bar, by removing the margin: -20px; the header will be placed fully in the document and the scrollbar will disappear.
codepen

Answer 2

Setting margin and padding to 0, then setting background width to 100% seemed to do the trick. Is this the desired result?
* {
margin: 0px;
padding: 0px;
}
.background {
background: url("https://static.kent.ac.uk/nexus/ems/50.jpg");
border: 3px solid black;
margin: 0 auto;
width: 100%;
}
.text {
margin: 0 30px 0 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
height: auto;
}
.text p {
margin: 5%;
font-weight: bold;
color: #000000;
opacity: 1;
}

Answer 3

It's happening because you gave border: 3px solid black; in your background class that's why it is not showing correctly.
If you want to use border at top and bottom then you can do like this
.background {
background: url("https://static.kent.ac.uk/nexus/ems/50.jpg");
border-top: 3px solid black;
border-bottom: 3px solid black;
margin: 0 auto;
width: 100%;
}
So the conclusion is you have to remove the border from left and right after then you can get the result you want.
Here you can see difference Codepan
Hope this will helps you