私のウェブサイトは現在ローカルサーバー上にありますが、これはそれが何と呼ばれているのかを知っている人にとっては簡単な修正になります。
これらのリスト（白で縁取られている）をフッターの使用可能なスペース（黒で縁取られている）の左端に浮かせようとしています。
これは私のCSSです
#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px;/*border: 1px solid #0C0;*/}
#footer a { text-decoration: underline; color: #c7bd89; }
#footer a:hover { text-decoration: none; color: #fff; }
#footer h6 { background: url(img/FOOTER-HR-BG.jpg) left center repeat-x; text-align: left;}
#footer h6 span { background: #8e2023; display: inline-block; padding-right: 5px; }
.footer-widgets { width: 960px; height: 503px; margin: 0px auto; padding: 0px; border: 1px solid #000;}
.footer-widgets li { width:280px; height: auto; list-style-image: none; list-style-position: outside; list-style-type: none; float: left; color: #fff; padding: 13px; margin-right: 10px; /*border: 1px solid #fff;*/ }
.footer-widgets li ul {color: red;}
.footer-widgets li ul li {color: #fff; margin-left: -50px; margin-top: -15px;}
.footer-widgets li p { font-size: 1em; line-height: 18px; text-align: left; /*border: 1px solid red;*/ }
.footer-widgets li h2 { font-size: 1.4em; font-weight: normal; letter-spacing: 1px; line-height: 30px; text-align: left;}
.footer-archives { position: relative; top: -210px;}
.footer-widgets li.last { position: relative; top: -210px;}
h6 { font-family:Verdana, Geneva, sans-serif; font-size: 1.2em; font-weight: normal; letter-spacing: 1px; margin-top: 15px; margin-bottom: 10px; color: #fff;}
.footer-copyright { position: absolute; width: 900px; left: 50%; margin-left: -450px; top: 400px; height: 100px; font-family: Tahoma, Geneva, sans-serif; line-height: 22px; font-size: 1em; color: #fff; text-align: center; text-transform: uppercase; }
.footer-copyright a { color: #fff !important; text-decoration: none !important; }
.footer-copyright a:hover { color: #c7bd89; text-decoration: underline !important; }
.copyright { margin-top: 27px; text-transform: uppercase; display: block; color: #cc9798;}
.copyright a { color: #cc9798 !important; text-decoration: underline; }
.footer-one, .footer-two, .footer-three, .footer-four { border: 1px solid #fff; float: left;}
含まれているフッターがあり、900px x 503pxのコンテナー内に、すべてのリストが左に浮かぶようにします（十分に小さい場合は、互いに下に表示します）。したがって、「Archives」は「Follow Us」の下に流れ、「Testimonials」の下に検索バーを配置すると、それに適合します。
これを実現するためにCSSで何ができますか？