Getting a webpage to take up 60% and be centered?

Question

I'm trying to create a website whose body up the middle 60%. I thought I'd do this:

body {
  align-items: center;
  text-align: left;
  justify-content: center;
  width: 60%;
}

But that's not working :(

I even tried using translateX to translate right 20%

Any advice? Suggestions?

you where only missing margin:auto; no need of a peticular display here, it is basic CSS. — G-Cyrillus, Feb 02 '20 at 19:40

score 2 · Answer 1 · answered Feb 02 '20 at 19:34

Try this html code :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
</head>

<body>
  Hello World !
</body>

And then this CSS :

html {
    height: 100%;
}

body {
    width: 60%;
    margin: auto;
}

You can try this Website to code html, css, and javascript online.

I hope I've helped you.

score 1 · Accepted Answer · answered Feb 02 '20 at 19:30

You can achieve it easily using CSS grid. Here's the MDN reference: https://developer.mozilla.org/en-US/docs/Web/CSS/grid

Example:

HTML file

<div class="container">
  <div class="content">
    Some content
  </div>
</div>

CSS file

.container {
  display: grid;
  grid-template-columns: 20% 60% 20%;
}

.content {
  grid-column: 2;
}

Yvan Roan · Answer 3 · 2020-02-02T19:34:51.290

0

you can remove width and instead use

 right: 20%;
 left : 20%;

It'll work I guess And i think it would be better to use a div instead of body

edited Feb 02 '20 at 19:34

answered Feb 02 '20 at 19:27

Yvan Roan

3 Answers3