Question

Problem:

Why doesn’t .locmidcontent position the set of element (form)?

Here is my HTML structure:

    <div class="locmidcontent">
        <form action="#" method="GET">
            <ul>
                <li>
                    <label>Country</label>
                    <select>
                         <option>ABC</option>
                    </select>
                </li>
                <li>
                    <label>Region</label>
                    <select>
                         <option>XYZ</option>
                    </select>
                </li>
                <li>
                    <label>City</label>
                    <select>
                         <option>COM</option>
                    </select>
                </li>
                <li>
                    <input value="View" type="submit">
                </li>
            </ul>
        </form>
    </div>

My CSS:

.container {
    width: 980px;
    margin: 0 auto; 
}

/* DOESN'T WORK */
.locmindcontent {
        margin-right: 200px;
        margin-top: 200px;
}

.locmidcontent ul li{
    display: inline;
    padding-right: 20px;
}

Snapshot – The current position is the default one, i need to move it to the arrow directions

Answer 1

It could be the fact that it says .locmindcontent instead of .locmidcontent in your CSS Change the name and try again.