0
我有以下的html：的CSS移動邊欄內容向左
<!DOCTYPE html>
<html lang="el" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="pingback" href="/pages/wordpress/xmlrpc.php">
<title> Δείγμα σελίδας</title>
<link rel="icon" type="image/x-icon" href="/pages/wordpress/wp-content/themes/testTheme.php/favicon.ico">
<link rel="stylesheet" href="/pages/wordpress/wp-content/themes/testTheme.php/style.css">
<meta name='robots' content='noindex,follow' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="Κανάλι σχολίων Δείγμα σελίδας » Sample Site" href="/pages/wordpress/index.php/sample-page/feed/" />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/svg\/","svgExt":".svg","source":{"concatemoji":"\/pages\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.7.3"}};
!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),!(j.toDataURL().length<3e3)&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,65039,8205,55356,57096),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,55356,57096),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55357,56425,55356,57341,8205,55357,56507),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55357,56425,55356,57341,55357,56507),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='https://api.w.org/' href='/pages/wordpress/index.php/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="/pages/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="/pages/wordpress/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.7.3" />
<link rel="canonical" href="/pages/wordpress/index.php/sample-page/" />
<link rel='shortlink' href='/pages/wordpress/?p=2' />
<link rel="alternate" type="application/json+oembed" href="/pages/wordpress/index.php/wp-json/oembed/1.0/embed?url=%2Fpages%2Fwordpress%2Findex.php%2Fsample-page%2F" />
<link rel="alternate" type="text/xml+oembed" href="/pages/wordpress/index.php/wp-json/oembed/1.0/embed?url=%2Fpages%2Fwordpress%2Findex.php%2Fsample-page%2F&format=xml" />
</head>
<body>
<nav>
<div id="desktop-nav">
<div class="site_name">
<a href="/pages/wordpress">Sample Site</a>
</div>
<ul class="nav">
<li class="page_item page-item-2">
<a href="/pages/wordpress">Home Page</a>
</li>
<li class="page_item page-item-2 current_page_item"><a href="/pages/wordpress/index.php/sample-page/">Δείγμα σελίδας</a></li>
</ul>
</div>
<div id="mobile-nav">
<div id="nav-dropdown">
<div class="site_name">
Sample Site </div>
</div>
<ul class="nav">
<li class="page_item page-item-2">
<a href="/pages/wordpress">Home Page</a>
</li>
<li class="page_item page-item-2 current_page_item"><a href="/pages/wordpress/index.php/sample-page/">Δείγμα σελίδας</a></li>
</ul>
</div>
</nav>
<div class="content">
<div id="sidebar" role="complementary">
<ul>
<li>
<form role="search" method="get" id="searchform" class="searchform" action="/pages/wordpress/">
<div>
<label class="screen-reader-text" for="s">Αναζήτηση για:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Αναζήτηση" />
</div>
</form> </li>
<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
<li><h2>Συντάκτης</h2>
<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
</li>
-->
</ul>
<ul role="navigation">
<li class="pagenav"><h2>Σελίδες</h2><ul><li class="page_item page-item-2 current_page_item"><a href="/pages/wordpress/index.php/sample-page/">Δείγμα σελίδας</a></li>
</ul></li>
<li><h2>Αρχείο</h2>
<ul>
<li><a href='/pages/wordpress/index.php/2017/03/'>Μάρτιος 2017</a></li>
</ul>
</li>
<li class="categories"><h2>Kατηγορίες</h2><ul> <li class="cat-item cat-item-1"><a href="/pages/wordpress/index.php/category/%ce%b1%cf%84%ce%b1%ce%be%ce%b9%ce%bd%cf%8c%ce%bc%ce%b7%cf%84%ce%b1/" >Χωρίς κατηγορία</a> (1)
</li>
</ul></li> </ul>
<ul>
<li><h2>Μεταστοιχεία</h2>
<ul>
<li><a href="/pages/wordpress/wp-login.php">Σύνδεση</a></li>
</ul>
</li>
</ul>
</div>
<article class="entry-content-page">
<h3>Δείγμα σελίδας</h3><p>Αυτό είναι ένα παράδειγμα σελίδας. Είναι διαφορετική από ένα άρθρο, επειδή θα μείνει σε ένα μέρος και θα εμφανιστεί στο μενού σας (στα περισσότερα θέματα). Οι περισσότεροι αρχίζουν με μια σελίδα «Σχετικά» που τους συστήνει σε πιθανούς επισκέπτες της ιστοσελίδας. Θα μπορούσε να γράφει κάτι σαν αυτό:</p>
<blockquote><p> Γειά σου! Είμαι ταχυδρόμος με ποδήλατο τη μέρα, επίδοξος ηθοποιός τη νύχτα, και αυτό είναι το blog μου. Ζώ στο Λος Άντζελες, έχω ένα μεγάλο σκυλί με το όνομα Τζακ, και μου αρέσουν οι piña coladas. (Και να με πιάνει η βροχή.)</p></blockquote>
<p>… ή κάτι σαν αυτό:</p>
<blockquote><p> Η XYZ Doohickey είναι μια εταιρεία όπου ιδρύθηκε το 1971, και παρέχει ποιότικα μαραφέτια στο κοινό από τότε. Βρίσκεται στην πόλη Gotham, Η XYZ απασχολεί πάνω από 2.000 ανθρώπους και κάνει όλων των είδών τρομερά πράγματα για την κοινότητα της Gotham.</p></blockquote>
<p>Ως νέος χρήστης WordPress, θα πρέπει να πάτε στον <a href="http://localhost/pages/wordpress/wp-admin/">Πίνακας Ελέγχου</a> για να διαγράψετε αυτή τη σελίδα και να δημιουργήσετε νέες σελίδες για το περιεχόμενό σας. Καλή διασκέδαση!</p>
<!-- Page Content -->
</article><!-- .entry-content-page -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#nav-dropdown').click(function(){
console.log("CLicked");
$('#mobile-nav .nav').toggle();
})
});
</script>
<footer>
</footer>
</body>
</html>
隨着下面的CSS：
@CHARSET "UTF-8";
nav{
margin-top:0px;
}
nav a {
text-decoration: none;
color: inherit;
}
.nav li a{
color: #1A180F;
}
.nav {
list-style-type: none;
background-color: #D8A62A;
}
.nav .page-item-2 {
color: black;
text-align: center;
}
.site_name {
font-weight: bold;
font-size: 1.5em;
text-align: center;
text-decoration: none;
}
.entry-content-page p {
padding:3px;
}
.entry-content-page h3{
text-align:center;
}
.entry-content-page {
max-width:70%;
float: right;
margin-left:1%;
margin-right:1%;
}
#sidebar {
max-width:20%;
float:left;
background-color:#916D3E;
color:#FBD533;
}
#searchform .screen-reader-text{
font-size:0.8em;
width:100%;
text-align:left;
}
.content {
width:100%;
margin:0px;
}
#sidebar ul{
width:100%;
list-style-type: none;
margin-right:0px;
}
#sidebar ul li{
width:100%;
margin-right:0px;
}
#sidebar a{
text-decoration: none;
color: inherit;
}
#sidebar ul li h2 {
color: #1A180F;
}
/*Desktop-specific options*/
@media only screen and (min-width: 100px) {
#desktop-nav {
display:block;
}
#mobile-nav {
display:none;
}
.nav {
margin-top: 0px;
}
.nav .page_item {
height:90px;
line-height: 90px;
display: inline-block;
padding:10px;
}
}
/*Tablet Medium-sixed screen*/
@media only screen and (max-width:900px){
.entry-content-page {
width:100%;
float:none;
margin:0px;
margin-left:120px;
}
.entry-content-page p {
padding:0px;
width:100%;
margin:0px;
}
#sidebar {
display:none;
}
#searchform {
display: none;
}
}
/*Smartphone*/
@media only screen and (max-width: 480px) {
#desktop-nav {
display:none;
}
#mobile-nav {
display:block;
}
.nav .page-item {
width: 100%;
}
#mobile-nav{
width:100%;
background-color: #D8A62A;
}
.site_name{
width: 100%;
margin:0px;
padding:0px;
cursor:pointer;
}
.nav {
width: 100%;
margin:0px;
display:none;
}
#sidebar {
display:none;
}
.entry-content-page {
width:100%;
float:none;
margin:0px;
margin-left:50px;
}
.entry-content-page p {
padding:0px;
width:100%;
margin:0px;
}
#searchform {
display: none;
}
}
那它就會變得像（現在）： 
我想要的是將側欄的內容向左移動，如下圖所示（紅色標記的scquare）：
你有什麼想法我會怎麼做？
EDIT1：
按照要求側邊欄的HTML內容是：
<div id="sidebar" role="complementary">
<ul>
<li>
<form role="search" method="get" id="searchform" class="searchform" action="/pages/wordpress/">
<div>
<label class="screen-reader-text" for="s">Αναζήτηση για:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Αναζήτηση" />
</div>
</form>
</li>
<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
<li><h2>Συντάκτης</h2>
<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
</li>
-->
</ul>
<ul role="navigation">
<li class="pagenav">
<h2>Σελίδες</h2>
<ul>
<li class="page_item page-item-2 current_page_item">
<a href="/pages/wordpress/index.php/sample-page/">Δείγμα σελίδας</a>
</li>
</ul>
</li>
<li>
<h2>Αρχείο</h2>
<ul>
<li>
<a href='/pages/wordpress/index.php/2017/03/'>Μάρτιος 2017</a>
</li>
</ul>
</li>
<li class="categories">
<h2>Kατηγορίες</h2>
<ul>
<li class="cat-item cat-item-1">
<a href="/pages/wordpress/index.php/category/%ce%b1%cf%84%ce%b1%ce%be%ce%b9%ce%bd%cf%8c%ce%bc%ce%b7%cf%84%ce%b1/" >Χωρίς κατηγορία</a> (1)
</li>
</ul>
</li>
</ul>
<ul>
<li><h2>Μεταστοιχεία</h2>
<ul>
<li><a href="/pages/wordpress/wp-login.php">Σύνδεση</a></li>
</ul>
</li>
</ul>
</div>
紅色輪廓輪廓代表一個容器還是容器的彩色背景？ 'padding-left：5px'可能對此有所幫助。 – GameGibu
要移除到左側的零件的標識符是什麼？ –
@GameGibu紅色的輪廓是我畫的屏幕截圖後的一個正方形，用於指示我想將torwads移動到左側的區域。 –