Html 如何将一个部分向右移动，而不将其拧在全视图上？

我有一个问题，一个部分是对齐太多的左侧

这是一个模板，该部分有四个框，文本水平放置在另一个框的侧面，但我只需要三个框，所以我删除了最后一个框。 现在我有三个盒子，第四个盒子的空间是空的，所以这三个盒子不在中间

因此，在全响应视图中，我有这个框，但它们是垂直放置在屏幕中心的一个上一个上。我希望它居中，我不知道如果不在全响应视图中移动它怎么办

我试着在左边填充一些东西或边距，但当它看起来在全视图上居中时，在全视图上看起来太向右了。 这是密码

这是带有style.css的链接！ 这是图片的链接

普伦萨

多洛雷姆药膏是一种对人体有益的药膏。

将此CSS添加到页面的中心位置

{ margin-left: auto; margin-right: auto; }

---

请发布CSS以运行此功能

更好的办法是，将它粘贴到这里，保存，然后更新上面的帖子，这样我们就可以确切地看到问题所在

---

不，这没有帮助，我更新了问题，也许现在你能理解得更好一点，对不起，英语！哈哈，我刚刚更新了链接！所以我发布的html是针对其中一个框的，我还有3个，对吗。。例如，原始页面是这样的--哦哦——。。。。我需要--O O--。但是当o delete打开时，它得到--o--。。。我想把其中的3个放在中间，也许你说的也很好，PD：我也放了一些图片的链接，根据我现在的理解，你只想把3个盒子放在中间。好的，这很容易。这些框需要放在两个父容器中——一个带有“文本对齐：中心”；一个带有“宽度：pxvalue；边距：自动”；这将使它们在任何浏览器中居中。我更新了我给出的答案，并添加了一个JS fiddle的链接。如果它看起来不“正确”，添加一个最大宽度到。行最大宽度：800px；这将使行中的框永远不会小于（800/100）*30像素，而是尽可能宽，在页面的80%范围内。多谢兄弟的帮助，谢谢！！！。但问题是，当我把网站放在手机上时，盒子变得又紧又薄，而且每一个盒子的文本都有点出格

{ margin-left: auto; margin-right: auto; }

enter code here <section id="content">
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="row">
                <div class="col-lg-3">
                    <div class="box">
                        <div class="box-gray aligncenter">
                            <h4>Prensa</h4>
                            <div class="icon">
                            <i class="fa fa-desktop fa-3x"></i>
                            </div>
                            <p>
                             Voluptatem accusantium doloremque laudantium sprea totam rem aperiam.
                            </p>

                        </div>
                        <div class="box-bottom">
                            <a href="#">Ver más</a>
                        </div>
                    </div>
                </div>

<div class="container">
    <div class="row">
        <div class="box">
            <div class="box-gray">
                <h4>Prensa</h4>

                <div class="icon"> <i class="fa fa-desktop fa-3x">Box image ?</i>
            </div>
            <p>Voluptatem accusantium doloremque laudantium sprea totam rem aperiam.</p>
            </div>
            <div class="box-bottom">
                <a href="#">Ver más</a>
            </div>
        </div>
        <div class="box">
            <div class="box-gray">
                <h4>Box 2</h4>

                <div class="icon"> <i class="fa fa-desktop fa-3x">Box image ?</i>
            </div>
            <p>Voluptatem accusantium doloremque laudantium sprea totam rem aperiam.</p>
            </div>
            <div class="box-bottom">
                <a href="#">Ver más</a>
            </div>
        </div>
        <div class="box">
            <div class="box-gray">
                <h4>Box 3</h4>

                <div class="icon"> <i class="fa fa-desktop fa-3x">Box image ?</i>
            </div>
            <p>Voluptatem accusantium doloremque laudantium sprea totam rem aperiam.</p>
            </div>
            <div class="box-bottom">
                <a href="#">Ver más</a>
            </div>
        </div>
        <br style="clear:both;"/>
    </div>
</div>

/* --- box --- */
.container {
    text-align:center;
}
.row {
    width:80%;
    margin:auto;
}
 .box {
    /* The boxes are liqid and will increase with browser size. 
    if you want them to stay at a certain width, apply a pixel value to .row */
    width: 30%;
    margin:1%;
    float:left;
}
.box-gray {
    background: #999999;
    padding: 20px 20px 30px;
}
.box-gray h4, .box-gray i {
    margin-bottom: 20px;
}
.box-bottom {
    padding: 20px 0;
    text-align: center;
    background-color:#ff00ff;
}
.box-bottom a {
    color: #fff;
    font-weight: 700;
}
.box-bottom a:hover {
    color: #eee;
    text-decoration: none;
}