• support@answerspoint.com

How to CSS box in middle of content?


I am trying to make a site that looks like this page http://www.csgoshuffle.com/howto.

I don't want the top right button to be functional, it will be just a picture. What I need help with is trying to make the content that looks like a grey background with box inside it.

I made the background but I need to make the box inside it and learn how to type the <p> inside the box.

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;

.Site-content {
  flex: 1;
header {
    width: 100%;
    height: 90px;
    background-color: #212022;
    border-bottom:1px solid orange;
main {
  background-color: #181719;
footer {
  width: 100%;
  height: 167px;
  background-color : #212022;
  border-top:1px solid orange;
  color: white
	width: 520px;
	height: 80px;
	background: url('//i.imgur.com/PHXLLsn.png') no-repeat scroll center;
  left: 120px;
  float: left;
	position: absolute;
	height: 23px;
	background: url('//i.imgur.com/qKairpt.png');
	margin-top: 32px;
	float: right;
	position: absolute;right: 130px


<body class="Site">
    <div class="wrapper">
    	<div id="logo"></div>
    	<div id="steamlogin"></div>

  <main class="Site-content">this is content</main>
  <footer>this is footer</footer>




You can use margin-right:auto and margin-left:autoon an element with fixed width (eg. width:980pxwidth:80%) to center that element. (I used margin property's shorthand version like margin: 50px auto;)

If you want to center elements contain text like h1h2p, etc. you can use text-align:center on those elements.

in the example below i created a div element with a class named "centered" and you can see how i centered the h2 elements, too. I hope this helps you.


Also i suggest you to check out some html/css tutorials. you can easly find them on the internet. By this way you can learn better.

  • answered 7 years ago
  • G John

Your Answer

    Facebook Share        
  • asked 7 years ago
  • viewed 1501 times
  • active 7 years ago

Best Rated Questions