<section>
When regarding of width, there are only three properties can be set to auto: margin-left margin-right width
</section><br>

# 3 auto
<div class="out1">
  <div>no setting</div>
  <div class="in2">margin, width: auto</div>
</div>

# 2 auto 1 fixed
<div class="out1">
    <div class="in3">margin-right: 50px</div>
    <div class="in4">margin-left: 50px</div>  
      <div class="in5">width: 50%</div>
</div>

# 1 auto
<div class="out1">
  <div class="in6">margin-left: auto</div>
  <div class="in7">margin-right: auto</div>
  <div class="in8">width: auto</div>  
</div>

# Over constrained
<div class="out1">
  <div class="in9">20px 50px 20px</div>
</div>
.out1{
  width: 500px;
  background-color: rgb(50,50,50);
  text-align: center;
  border: 1px solid;
  margin-bottom: 20px;
}

.in2{
  margin: auto;
  width: auto;
}

.in3{
  margin: 0 50px 0 auto;
  width: auto;
}

.in4{
  margin: 0 auto 0 50px;
  width: auto;
}

.in5{
  margin: 0 auto 0 auto;
  width: 50%;
}

.in6{
  margin: 0 50px 0 auto;
  width: 50%;
}

.in7{
  margin: 0 auto 0 50px;
  width: 50%;
}

.in8{
  margin: 0 50px 0 50px;
  width: auto;
}

.in9{
  margin: 0px 20px 0px 20px;
  width: 200px;  
}

div > div{
  background-color: rgb(90,90,90);
}

body{
  background-color: rgb(30,30,30);
  color: white;
  font-family: verdana;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.