定位 <p> 未正确对齐

Question

CSS 的新手。似乎无法正确对齐这些段落！这适用于 lg、md、sm 屏幕尺寸的响应式页面。当屏幕尺寸改变时，蓝色框会偏离几个像素并四处移动。为什么它们不能在绿色框内完美对齐？蓝框和绿框都是ps。

代码笔： http://codepen.io/pleiovn/pen/RaBqgY

    #p-text {
    background-color: #a1ab5f;
    padding: 10px;
    text-align: left;
    clear: both;
    width: 90%;
    height: 300px;
    margin: 10px;
}

#p-head {
    background-color: #5fa1ab;
    padding: 10px;
    text-align: right;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 33%;
    height: 50px;
    margin: 10px;
}

Answer 1

因为你的媒体查询写错了

这个

@media (min-width: 991px) and (max-width: 768px)

应该是

@media (max-width: 991px) and (min-width: 768px)

定位 <p> 未正确对齐

Positioned <p> not aligning properly

css

responsive