如何在媒体查询中修复我的p标记

Question

我正在尝试向我的代码添加媒体查询。但是，当我试图将我的段落向左移动时，文本转到下一行。如何将<p>标记移动到中心？

这是我的代码：

     @media (max-width: 1023px ) and (min-width: 767px) {

               #pt {
                 padding-left: 300px;

               }
              #pet {
                text-align: center;
                padding-left: 200px;
                margin-bottom: 1.3em;
                padding: 1em;
                -webkit-column-width: 150px;
         -moz-column-width: 150px;
              column-width: 150px;

              }

             }

            </style>
   <div class="col-md-4 col-sm-6 col-xs-12 text-center " data-wow-delay="0.6s">
                <div class="service-item">
                    <div class="service-icon">
                        <i   id="pt" class="fa fa-clock-o fa-5x"><br></i>

                    </div>



                    <h3  id="pt" style="font-size: 18px; font-family: 'Roboto', sans-serif;">Project Tracking</h3>
                    <p  id="pet"  style="font-size: 16px;  font-family: 'Roboto', sans-serif;">
                        Obtain constant
                        updates on the progress of the project along with images and track your investment regularly
                    </p>
                </div>

            </div>

结果如下：

Result

Answer 1

您的column-width值正在提前将文字推送到下一行。增加它的大小。注意我还评论了几个padding来保持居中对齐。

Check resizable JSFiddle here