Responsive CSS stopped working

Question

The three 'cols' are not stacking as the width is changed.

I've been fiddling around with a website this evening, made the columns responsive with float:left; width:300px;padding: 10px; but it stopped working, I neglected to test the responsiveness as I built the site around it, I've stripped the site down to the bare bones and still can't figure the issue.

I've been testing the site in jsfiddle - http://jsfiddle.net/mj5o5f19/3/

Can someone please point me in the right direction of my mistake?

Code - css:

body {

}

input, textarea, select {
    font-family: Verdana, sans-serif;
    font-size: 10px;
    color: #505050;
}

/* header CSS */
.break-top {
    width: 100%;
    height: 6px;
    background: url(images/break-top.gif);
    margin: 0 auto;
}

.header {
    width: 100%;
    height: 74px;
    background: url(images/header.gif);
    margin: 0px auto;
    position: relative;
}

h1.logo {
    background: url(images/logo.gif) no-repeat;
    position: relative;
    width: 245px;
    height: 74px;
    margin: 0 auto;
}

.break {
    width: 100%;
    height: 6px;
    background: url(images/break.gif);
    margin: 0 auto;
}

/* Main Text CSS */
.main {
    width: 980px;
    margin: 0 auto;
}

/* Col CSS */
.three-cols {
    width: 100%;
    padding-top: 25px;
}

.col {
    float: left;
    width: 226px;
    text-align: justify;
    padding: 25px;
    border: 1px solid #000;
}

.col-last {
    margin-right: 0;
}


/* Footer CSS */
.footer {
    width: 100%;
    height: 45px;
    margin: 0 auto;
    bottom: 0;
    position: fixed;
}

.form-style-1 {
    margin:10px auto;
    max-width: 400px;
    padding: 20px 12px 60px 2px;
    font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-1 li {
    padding: 0;
    display: block;
    list-style: none;
    margin: 10px 0 0 0;
}
.form-style-1 label{
    margin:0 0 5px 0;
    padding:0px;
    display:block;
    font-weight: bold;
}
.form-style-1 input[type=text], 
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
.form-style-1 input[type=tel],
textarea, 
select{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:1px solid #BEBEBE;
    padding: 7px;
    margin:0px;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;  
}
.form-style-1 input[type=text]:focus, 
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 input[type=tel]:focus,
.form-style-1 textarea:focus, 
.form-style-1 select:focus{
    -moz-box-shadow: 0 0 8px #88D5E9;
    -webkit-box-shadow: 0 0 8px #88D5E9;
    box-shadow: 0 0 8px #88D5E9;
    border: 1px solid #88D5E9;
}
.form-style-1 .field-divided{
    width: 49%;
}

.form-style-1 .field-long{
    width: 100%;
}
.form-style-1 .field-select{
    width: 100%;
}
.form-style-1 .field-textarea{
    height: 100px;
}
.form-style-1 input[type=submit], .form-style-1 input[type=button]{
    background: #4B99AD;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}
.form-style-1 input[type=submit]:hover, .form-style-1 input[type=button]:hover{
    background: #4691A4;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
}
.form-style-1 .required{
    color:red;
}

html:

<div id="main">
    <div class="main">
        <div class="three-cols">
            <div><br/>
            </div>
            <div class="col">
            </div>
            <div class="col">
            </div>
            <div class="col">
                <form action="" method="POST">
                    <ul class="form-style-1">
                        <li>
                            <label>Full Name <span class="required">*</span></label>
                            <input type="text" id="name" class="field-long" placeholder="Name"/>
                        </li>
                        <li>
                            <label>Email <span class="required">*</span></label>
                            <input type="email" id="email" class="field-long" placeholder="Email"/>
                        </li>
                        <li>
                            <label>Telephone<span class="required">*</span></label>
                            <input type="tel" id="telephone" class="field-long" placeholder="Telephone/Mobile"/>
                        </li>
                        <li>
                            <label>Your Message <span class="required">*</span></label>
                            <textarea id="message" class="field-long field-textarea"></textarea>
                        </li>
                        <li>
                            <input type="submit" value="Submit" />
                        </li>
                    </ul>
                </form>
            </div>
            <div><br/>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <p>&copy; 2015 </p>
</div>

Answer 1

I've changed the CSS for the #main element to:

.main {
max-width: 980px;
margin: 0 auto;
}

http://jsfiddle.net/mj5o5f19/5/

Answer 2

Your container div .main is set to 980px so will not adjust down based on screen size.

The div .three-cols is set to 100% but since it is a child of .main will never resize and will always be 980px as well.

Bottom line, the .main div needs to adjust based on screen size. My advice is to look at something like bootstrap's grid to see how they handle this situation.