CSS: Word Wrap when adjusting window size?? Responsive Design

Question

EDIT: The max-width:760px fixed my scaling issues! Thanks for that! But a new problem has shown up, now my navigation, in the small window scales as well...and I want it to be a fixed size.

Hey guys so I'm studying Responsive Design in my html class, and we have to make a website for a large layout, a medium layout, and a small layout. The large was easy, as well as the medium, but for the small layout, Because the window is so small, I'm trying to make the words wrap so you have to scroll down and the text fits in the window. I can't for the live of me figure out how to do this.

I have a reference that works, I've even copy+pasted the code directly over and it still doesn't work. It's all of the body, the article, and stuff that needs to be wrapped. It's driving me insane. CSS validator says no errors, so I'm just confused.

The navigation I've figured out is perfect, it's just the things in the promo classes that are giving me trouble.

Here's my CSS code:

header a.logo {
    width: 105px; height: 40px;
    top: 16px; right: 15px;
    background-image: url(../images/logo_small.png);
    }

article { padding: 20px 20px 10px 20px;
        margin-top:-400px;
        word-wrap:break-word;
        }

nav {
    display: block;
    position: static;
    padding: 10px 0px 10px 0px;
    background-color: #000000;
}

nav a {
    color: #FFFFFF;
    display: block;
    margin: 15px;
    padding: 9px;
    border: 1px solid #FFFFFF;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

nav a:hover { color: #ED1C24; background-color:#fff; }

.promo_container {padding: 0px;}

.promo_container .promo {
    width: auto;
    float: none;
    padding: 10px 0px 0px 0px;
    background-position: 20px 13px;
    border-top: 1px solid #ccc;
}

.promo_container .promo .content { padding: 0px 20px 5px 90px; }


footer { border-top: 1px solid #a6abc5; }
article { padding: 20px 20px 10px 20px; }

body {background-image: none;}

.wrapper{width:760px;
        margin:auto;
        position:relative;
        background-color:#ffffff;
        padding-left:10px;
        padding-right:10px;
        border: 3px #000;
        -webkit-border-radius:20px; 
        -moz-border-radius:20px; 
        border-radius:20px; 
        }

.optcenter{background-image:none;)

And the HTML code:

<div class="wrapper">

<article>
<center><h2>Welcome to Redline Performance</h2></center>
<p>Redline Performance Racing is your one stop shop for all things speed. We offer a full fledged racing school with the fastest cars, and visit the most famous race tracks. Experience a thrill ride like never before, only from Redline Performance Racing.</p>
</article>

<div class="promo_container">
    <div class="promo one">
        <div class="content">
            <h3>Speed</h3>
            <p>At Redline Performance Racing, we only offer the fastest cars,     capable of reaching the fastest speeds.</p>
            <p><a class="cta" href="cars_tracks.html">Visit our Cars</a></p>
        </div>
    </div>
    <div class="promo two">
        <div class="content">
            <h3>Safety</h3>
            <p>blah</p>
            <p><a class="cta" href="">Visit our blog</a></p>
        </div>
    </div>
    <div class="promo three">
        <div class="content">
            <h3>Thrills</h3>
            <p>Are you ready for the ultimate thrill ride?</p>
            <p><a class="cta" href="">Visit our blog</a></p>
        </div>
    </div>
    <div class="clear-fix"></div>
</div>
<footer>
<p>&copy; RedLine Performance Racing</p>
</footer>

I'm assuming the problem is in CSS? If someone could help that would be amazing. THANKS!

Answer 1

The div with class wrapper has a fixed width of 760px. That is not good for responsive design. Instead of that, use max-width:760px . That should get you started.

Oh and also, why do you have margin-top:-400px in the article styling?