html - How to change the <hr> size and center it of a div? -

hr {    width:100%;    height:2px;    background-color:#888;  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>    <div class="content">      <div class="container">        <div class="row">          <div class="col-xs-12">            <div class="row">              <div class="col-sm-6 col-sm-offset-1">                <h3> news</h3>                <h4>the new concept</h4>                <p>while files form internet can useful , file type can prote....</p>                <div class="read-more">                  <a href="#">read more news</a>                </div>              </div>              <div class="col-sm-4 news">                <h3> news</h3>                <h4>the new concept</h4>                <p>while files form internet can useful , file type can prote....</p>                <div class="read-more">                  <a href="#">read more news</a>                </div>              </div>            </div>          </div>        </div>      </div>    </div>    <div class="container">      <div class="row">        <hr>      </div>    </div>      <div class="container">      <div class="row">        <div class="col-sm-12">          <h3 id="ebook">hot e-book</h3>        </div>      </div>    </div>

i make webpage more clear , want change hr line width size looks same width above div area.

however, tried few times , did not work come here see if can me?

please review in full page because responsive desgin. how change hr line size , make width col-sm-6 + col-sm-4?

wrap hr div , center it.

hr {    width:100%;    height:2px;    background-color:#888;  }  #div-center{    float: none;    margin: 0 auto;  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>    <div class="content">      <div class="container">        <div class="row">          <div class="col-xs-12">            <div class="row">              <div class="col-sm-6 col-sm-offset-1">                <h3> news</h3>                <h4>the new concept</h4>                <p>while files form internet can useful , file type can prote....</p>                <div class="read-more">                  <a href="#">read more news</a>                </div>              </div>              <div class="col-sm-4 news">                <h3> news</h3>                <h4>the new concept</h4>                <p>while files form internet can useful , file type can prote....</p>                <div class="read-more">                  <a href="#">read more news</a>                </div>              </div>            </div>          </div>        </div>      </div>    </div>    <div class="container">      <div class="row">        <div class="col-xs-10" id="div-center">        <hr>        </div>      </div>    </div>      <div class="container">      <div class="row">        <div class="col-sm-12">          <h3 id="ebook">hot e-book</h3>        </div>      </div>    </div>