How to indent a DIV?
wrap it in another div. make the outer div margin: 0 auto;
and the inner div margin-left: 50px
.outer {
width: 200px;
margin: 0 auto;
background-color: yellow;
}
.inner {
margin-left: 50px;
background-color: orange;
}
<div class="outer">
<div class="inner">
hello world
</div>
</div>
<html>
<head>
<title>Test</title>
<style>
#outer {
margin: 0 auto; /*center*/
width:200px;
background-color:red; /*just to display the example*/
}
#inner {
/*move the whole container 50px to the left side*/
margin-left:-50px;
margin-right:50px;
/*or move the whole container 50px to the right side*/
/*
margin-left:50px;
margin-right:-50px;
*/
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
This is the result!
</div>
</div>
</body>
</html>
try
padding-left: 50px;
and if that doesn't suffice keep the padding and ad another div inside the bigger one.