NikolaTECH NikolaTECH - 7 months ago 12
HTML Question

How to put borders closer to the text and image and make background gray in CSS?

This is what I've done:



body {
background-color: #d92626;
color: white;
}
body {
border-left: 5px solid black;
border-right: 5px solid black;
padding: 50px 50px;
}
.test {
display: block;
margin-left: auto;
margin-right: auto;
}

<div class="container">
<h1 align="center">
My text
</h1>
<h2 align="center">
MORE MORE MORE<br><br><br>
</h2>
<img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300">
</div>





How can I now move left and right border closer to the text and image, and then make the background between left and right border gray?

Answer

Borders are placed around an element's dimensions, in your case, the body tag covers the entire window. If you wanted them to be closer you can add borders to another element than body, and make it with less width.

I see you already have a container (.container) so you can use it and apply the borders and background to it while adding for example width: 60% and then margin: 0 auto to center it horizontally.

body {
  background-color: #d92626;
  color: white;
}

.container {
  border-left: 5px solid black;
  border-right: 5px solid black;
  padding: 50px 50px;
  width:60%;
  margin:0 auto;
  background: gray;
}

.test {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<div class="container">
  <h1 align="center">
    My text
  </h1>
  <h2 align="center">
    MORE MORE MORE<br><br><br>
  </h2>
  <img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300">
</div>