add borders to sides of screen in css-CodePudding

This is basically what I am trying to do:

Step 1 have a HTML file with elements:

Step 2 (add borders to the side of the screen):

(code of the HTML file):

<a>hello</a>

I attempted to use divs on the sides of the screen, that didn't work.

I also attempted to put my elements inside of a div and use the aspect-ratio property to try and have the same effect, that didn't work.

Hope this all makes sense.

CodePudding user response：

You could just set the body background and reduce the size of a. Something like this.

body {
  background-color: grey;
}

a {
  width: 33%;
  margin: auto;
}

In the future, you should replace a with a div with a container class or something like that.

CodePudding user response：

Here is an example with flex :

<html>
  <head>
    <style>
      .flex {
        display: flex;
        justify-content: space-between;
      }
      /* Define the styles for the page borders */
      .border-left {
        width: 33%;
        height: 100vh;
        background-color: black;
      }
      .border-right {
        width: 33%;
        height: 100vh;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div >
    <div ></div>
      <div><h1>content</h1></div>
    <div ></div>
    </div>
  </body>
</html>

CodePudding user response：

.main{
    border-right: 25px solid black;
    border-left: 25px solid black;
    height: 100vh
}

.container{
  height: 300px;
  text-align: center
}

<div >
  <div >
  this is container
  </div>
</div>