html - How do I Limit Div size? -

i'm trying make div stay around 70% left width big. if max-width: 500px div goes center.

in green can see size of div

how can reduce width of div , keep div in position? also wanted make "$user" go right of image.

css

.post { width: 70%; position:relative; margin: 0 auto;     } 

html

<div class="post">                                      <h1><?php echo $title; ?></h1>                                  <img src="data:image/gif;base64,<?php echo $image;?>" >                  <div class="postref" >                      <button type="button" class="btn btn-link"><?php echo $likes;?> likes</button>                      <button type="button" class="btn btn-link"><?php echo $comments; ?> comments</button>                      <button type="button" class="btn btn-link"><?php echo $user; ?></button>                  </div>                  <div class="postbtns">                      <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></button>                      <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-thumbs-down"></span></button>                  </div>              </div> 

margin: auto automatically gives half of remaining space left , right margins centering it. if want div on left side of screen remove margin you're giving it.

edit

after reading in comments seems want 2-column type system. in order position post in way want should use global container, , position , have posts take fraction of space:

.container{   margin: 0 auto;   width: 80%;   max-width: 800px; } .post-container{   float:left;   width: 70%; } .other-container{   width: 29%;   float: right;   background: pink; } .post {   display: inline-block; width: 100%; background: lightblue; } 

html:

<div class="container"> <div class="post-container">    <div class="post">                                      <h1>gif</h1>                                  <img src="" >                  <div class="postref" >                      <button type="button" class="btn btn-link">4 likes</button>                      <button type="button" class="btn btn-link">5 comments</button>                      <button type="button" class="btn btn-link">user</button>                  </div>                  <div class="postbtns">                      <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></button>                      <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-thumbs-down"></span></button>                  </div>              </div>   <div class="post">                                      <h1>gif</h1>                                  <img src="" >                  <div class="postref" >                      <button type="button" class="btn btn-link">4 likes</button>                      <button type="button" class="btn btn-link">5 comments</button>                      <button type="button" class="btn btn-link">user</button>                  </div>                  <div class="postbtns">                      <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></button>                      <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-thumbs-down"></span></button>                  </div>              </div> </div>  <div class="other-container"> other stuff!!!!<br><br><br><br><br><br><br><br><br><br><br><br>and others. </div> </div>              </div> 

https://jsfiddle.net/1g57b5o3/2/