-1
私はウェブサイトを構築しようとしています。私は、私の "about"ページの "What I Do"セクションのページの片側に行くためにサイドバーを作っていました。何らかの理由でそれが記事タグと合併しているように見えて、私はそれを分けるように見えない。私はこれを解決するために何をする必要がありますか？私はまた私の "連絡先"ページのリストをスタイリングするのに困っている。ヘルプをいただければ幸いです。私が欲しいところに行かないでください
http://danielcollins.mweb.spinspire.com/
編集：ここで私はASID削除し、それはここに私のコード
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>
あなたは左に記事を浮かべたのだが、幅を持っているので、サイドバーにフロートrigthと幅を追加し、それは彼らが横並びになります。 – wired
これまでに試したコードもご提供いただけますか？多分あなたの質問を解決するのに役立ちます。 – Rubenxfd
と、もしあなたが不思議なのであれば、それは記事であり、ブロックレベル要素であるからです。 – wired