When re sizing web page, my html/css text moves to left side of the page

Question

I am a noob when it comes to css, but I am experiencing a problem with my text in html/css. When I re size my webpage my text goes to the left side of the page and gets messed up and out of place. Here is my code:

**CSS:**
#NewsPosts {
position: fixed;
width: 75%;
top: 260px;
left: 32%;
padding: 30px;
overflow: hidden;

**HTML:**
<!--News Posts-->
            <div id="NewsPosts">
                <p>MY text goes here</p>
            </div>

Answer 1

If you want to center #NewPosts to all screens, you can accomplish that like this: http://jsfiddle.net/uknqdr6g/

CSS

#NewsPosts {
    width: 75%;
    /* margin-top:260px; If you want to use the margin-top */
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    padding: 30px;
}

If you still want it to have a position:fixed; rearrange your code like this instead: http://jsfiddle.net/uknqdr6g/1/

Html

<div id="container">
    <div id="NewsPosts">
        <p>MY text goes here</p>
        <img src="http://images5.fanpop.com/image/photos/31100000/random-random-31108109-500-502.jpg" width="300" height="auto">
    </div>
</div>

CSS

#container {
    left: 50%;
    width:400px;
    /* margin-top:260px; if you still want to use your margin-top */
    margin-left: -200px; /* Half of the width */
    background:#000;
    padding:20px;
    position: fixed;
}
#NewsPosts {
    width:100%;
    left: 0;
    right: 0;
    text-align: center;
    overflow: hidden;
    background:#fff;
}