-1
我想建立一个网站，我想做一个侧边栏去页面的一边为我的“关于”页面上的“我做”部分该网站，但由于某种原因，它似乎是与文章标签合并，我似乎无法分开它。任何想法我需要做什么来解决这个问题？我在我的“联系方式”页面上也遇到了麻烦。帮助将不胜感激。一边酒吧不要去我想要的地方
http://danielcollins.mweb.spinspire.com/
编辑：这是我的代码
body{
font-family:exo;
font-size:15px;
line-height:1.5;
padding:0;
background-color:#f4f4f4;
}
.container{
width:80%;
margin:auto;
overflow:hidden;
}
.button_1{
height:38px;
background:#32cd32;
border:0;
padding-left:20px;
padding-right:20px;
color:#ffffff;
}
.dark{
padding:15px;
background:black;
color:#ffffff;
margin-top:10px;
margin-bottom:10px;
}
header{
background:black;
color:#ffffff;
padding-top:30px;
min-height:70px;
border-bottom:#32cd32 3px solid;
}
header a{
color:#ffffff;
text-decoration:none;
text-transform: uppercase;
font-size: 16px;
}
ul{
margin:0;
padding:0;
}
header li{
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header #branding{
float:left;
}
header #branding h1{
margin:0;
}
header nav{
float:right;
margin-top:10px;
}
header .highlight, header .current a{
font-weight:bold;
}
header a:hover{
color:#cccccc;
font-weight:bold;
}
#showcase{
min-height:400px;
background:url('../IMG/Website1.jpg') no-repeat 0 -175px;
text-align:center;
color:white;
}
#showcase h1{
margin-top: 90px;
font-size:55px;
margin-bottom:10px;
}
#showcase p{
font-size:20px;
}
#newsletter{
padding:15px;
color:#ffffff;
background:black;
}
#newsletter h1{
float:left;
}
#newsletter form{
float:right;
margin-top:15px;
}
#newsletter input[type="email"]{
padding:4px;
height:25px;
width:250px;
}
#boxes{
margin-top:20px;
}
#boxes .box{
float:left;
width:30%;
text-align:center;
padding:10px;
}
#boxes .box img{
width:200px;
}
aside #sidebar{
float:right;
width:30%;
margin-top:10px;
}
aside #sidebar .quote input, aside#sidebar .quote textarea{
width:90px;
padding:5px;
}
article#main-col{
float:left;
width:65%;
}
ul #contact li{
list-style:none;
padding:20px;
border:#cccccc solid 1px;
margin-bottom:5px;
background:#e6e6e6;
}
footer{
padding:20px;
margin-top:20px;
color:#ffffff;
background-color:black;
text-align:center;
}
@media(max-width: 768px){
header #branding,
header nav,
header nav li,
#newsletter h1,
#newsletter form,
#boxes .box,
article#main-col,
aside#sidebar{
float:none;
text-align:center;
width:100%;
}
header{
padding-bottom:20px;
}
#showcase h1{
margin-top:40px;
}
#newsletter button, .quote button{
display:block;
width:100%;
}
#newsletter form input[type="email"], .quote input, .quote textarea{
width:100%;
margin-bottom:5px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Afforable and professional web design">
<meta name="keywords" content="web design, affordable web design">
<meta name="author" content="Daniel Collins">
<title>Web Design | About</title>
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
<link rel="stylesheet" href="./CSS/newCascadeStyleSheet.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Daniel's</span> Web Design Resume</h1>
</div>
<nav>
<ul>
<li><a href ="index.html">Home</a></li>
<li class="current"><a href ="about.html">About</a></li>
<li><a href ="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section id="newsletter">
<div class="container">
<h1>Subscribe to our Newsletter</h1>
<form>
<input type="email" placeholder="Enter Email">
<button type="submit" class="button_1">Subscribe</button>
</form>
</div>
</section>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">About Me</h1>
<p>
In turpis purus, suscipit sed lectus
lacinia, blandit tristique neque. Suspendisse
tincidunt et tortor eu lobortis. Suspendisse potenti.
Proin lobortis porta nisl, semper pretium dui accumsan vel.
Aenean ultrices lectus id lacus sollicitudin, at consequat
lorem lacinia. Fusce lacinia hendrerit augue, quis vehicula arcu
rutrum vel. Phasellus eget tempus odio.
</p>
<p class="dark">
In turpis purus, suscipit sed lectus
lacinia, blandit tristique neque. Suspendisse
tincidunt et tortor eu lobortis. Suspendisse potenti.
Proin lobortis porta nisl, semper pretium dui accumsan vel.
</p>
</article>
<aside id="sidebar">
<div>
<h3>What I Do</h3>
<p>In turpis purus, suscipit sed lectus
lacinia, blandit tristique neque. Suspendisse
tincidunt et tortor eu lobortis. Suspendisse potenti.
Proin lobortis porta nisl, semper pretium dui accumsan vel.
</p>
</div>
</aside>
</div>
</section>
<footer>
<p>Daniel Web Design, Copyright © 2017</p>
</footer>
</body>
</html>
你飘来的文章在左，使其宽度，所以加浮动分辩和宽度的侧栏，它会他们将并排侧。 – wired
您是否还可以向我们提供您迄今为止尝试过的一些代码？也许这将有助于解决你的问题。 – Rubenxfd
如果你想知道为什么它是因为文章和旁边是块级元素。 – wired