inputタグが文字の隣に来ないものがある

Question

labelの中にinputタグをいくつか使用していますが、
基本的に文字の隣にくるものだと思っていました。しかし、
なぜか隣にこないものがあります。
（画像参照ください。「規約に同意します」の左に、チェックボックスくるようにしたいのですが、
上に来てしまいます・・・）

 <section>
            <h1>CONTACT</h1>



            <!-- ここからフォーム -->
            <form>
                <fieldset>
                    <legend>基本情報</legend>
                    <label for="name">お名前：</label> <input id="name" type="text" name="お名前">
                    <label for="mail">メールアドレス： </label><input id="mail" type="text" name="メールアドレス">
                    
                   <label>区分</label> 
                    <input id="personal" type="radio" name="区分" value="個人の方"><label for="personal">個人の方</label>
                    <input id="corporation" type="radio"　name="区分" value="企業の方"><label for="corporation">企業の方</label>
                </fieldset>

                <fieldset>
                    <legend>お問い合わせ本文</legend>
                    
                    <label for="category">お問い合わせの種類</label>
                    <select id="category" name="お問い合わせの種類">
                        
                        <optgroup　label="業務について">
                            <option>デザイン業務について</option>
                            <option>講師業について</option>
                            <option>DTP制作について</option>
                            <option>プロダクトデザインについて</option>
                        </optgroup>

                        <optgroup label="制作について">
                            　　<option>納期について</option>
                            <option>価格について</option>
                            <option>支払い方法について</option>
                            <option>その他</option>

　　　　　　　　　　　　　　　</optgroup>







                    </select>

                    <label for="para">本文：</label>
                    <textarea id="para" name="本文" placeholder="お問い合わせ内容など、自由にお書きください。"></textarea>
                    
                    <label>確認</label>
                    <input id="yes" type="checkbox" name="確認"　value="規約に同意します">
                    <label for="yes">規約に同意します</label>
                    
                    
                </fieldset>

css

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #595758;
    background-color: #f2f2f2;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

header {
	background-color: white;
	border-top: 3px solid #B19956;
}

h1, h2 {
	width: 900px;
	margin: 0 auto;
}

h1 a {
	color: #555;
	text-decoration: none;
	font-size: 28px;
	font-weight: 900;
	display: block;
	margin: 20px 0 0 0;
}
h1 a:hover {
	color: #333;
}

h2 {
	color: #555;
	font-size: 16px;
	padding: 10px 0 0 0;
	font-weight: 100;
}

nav {
	background-color: #EBEBE7;
	margin: 30px 0 0 0;
}
nav ul {
	width: 900px;
	margin: 0 auto;
}
nav ul li {
	list-style: none;
	display: inline-block;
}
nav ul li a {
	font-size: 12px;
	text-decoration: none;
	margin: 0 30px 0 0;
	display: block;
	padding: 20px 0;
	font-weight: 900;
	color: #444;
}
nav ul li a:hover {
	color: #B19956;
}


div p {
	text-align: center;
	padding: 30px 0;
	background-color: #FFFFFF;
}


div h3 {
	text-align: center;
	margin: 45px 0 30px 0;
	padding: 0 20px;
	font-size: 30px;
}


div ul {
	max-width: 900px;
	margin: 0 auto 50px auto;
	list-style: none;
}
div ul li {
	width: 240px;
	padding: 30px 15px;
	margin: 10px;
	display: inline-block;
	background-color: #fff;
	border: 1px solid #EDE6DC;
	text-align: center;
	font-weight: 900;
	font-size: 20px;
}
div ul li a {
	text-decoration: none;
	color: #444;
	line-height: 45px;
	display: block;
}
div ul li a:hover {
	color: #B19956;
}






footer {
	clear: both;
	text-align: center;
	background-color: #2D2D2D;
	color: #fff;
	padding: 30px 0;
	font-size: 12px;
}

input#yes {
	width: 20px;
}











/* ==================
	Aboutページ用css
================== */

div section {
	margin: 50px auto;
	width: 900px;
}
div section h1,
table caption {
	font-size: 14px;
	border-left: 3px solid #B19956;
	line-height: 1;
	padding: 0 0 0 10px;
	margin: 0 0 20px 0;
	text-align: left;
	font-weight: 900;
}
div section img {
	width: 400px;
	display: block;
	margin: 0 20px 0 0;
	float: left;
}
div section header {
	display: block;
	width: 430px;
	padding: 20px;
	float: right;
}
div section header h2 {
	width: 400px;
	margin: 0 0 20px 0;
	padding: 0;
	font-size: 16px;
	font-weight: 900;
}
div section header p {
	widows: 400px;
	font-size: 12px;
	text-align: left;
	padding: 0;
	line-height: 18px;
}






/* ==================
	Aboutページーーテーブル用css
================== */
#skill {
	clear: both;
	width: 900px;
	margin: 0px auto;
	padding: 30px 0;
}


table {
	text-align: left;
	width: 900px;
	margin: 30px auto;
}
table tr {
	font-size: 13px;
}
tbody {
	background-color: #fff;
	margin: 0;
}
thead {
	background-color: #2D2D2D;
	color: #fff!important;
	margin: 0;
}
thead tr th {
	background-color: #2D2D2D;
	color: #fff!important;
	font-size: 15px;
	padding: 5px;
	margin: 0;
}
table tr th {
	padding: 5px;
}
table tr td {
	padding: 5px;
	color: #666666;
}

table tr:nth-child(2n) {
	background-color: #E2E1DE;
}

tfoot tr td {
	text-decoration: underline;
	font-size: 12px;
	font-style: italic;
	color: #b8b8b8;
	padding: 0;
}
















/* ==================
	Contactページ用css
================== */



form {
	width: 900px;
	background-color: #fff;
	padding: 30px;
	margin: 30px auto 60px;
}

legend {
	font-size: 22px;
	font-weight: 900;
	margin: 0 0 15px 0;
	color: #B19956;
}

label {
	display: block;
	text-align: left;
	font-size: 16px;
	font-weight: 900;
	margin: 0 0 5px 0;
}

form input, form textarea,select {
	padding: 10px;
	margin: 2px 0 20px;
	border: 1px solid #EBEBE7;
	width: 880px;
	font-size: 13px;
}

#personal,#corporation,#varify {
	float: left;
	width: 20px;
	height: 15px;
	margin: 0 0 5px 0;
}
.left {
	float: left;
	height: 20px;
	line-height: 1.3;
	font-size: 13px;
	font-weight: 100;
	margin: 0 15px 0 0;
}

select {
	width: 100%;
}

fieldset {
	margin: 0 0 30px 0;
	border: 0;
	border-bottom: 1px solid #ebebe7;
	padding: 0 0 30px 0;
}

optgroup {
	color: #b4b4b4;
}
select option {
	margin: 0 0 0 15px;
	color: #000;
}

button {
	background-color: #B19956;
	color: #fff;
	border: none;
	width: 400px;
	padding: 10px 0;
	margin: 0 0 20px 0;
	border-radius: 6px;
	font-weight: 900;
	display: block;
	margin: 0 auto 20px auto;
}
#reset {
	background-color: #EBEBE7;
	color: #555;
}
button:hover {
	cursor: pointer;
	opacity: 0.8;
}






コード

Comments

[thyda.eiqau]

スタイルシートも提示してください

Answer 1

form input, form textarea,select {
    padding: 10px;
    margin: 2px 0 20px;
    border: 1px solid #EBEBE7;
    width: 880px;
    font-size: 13px;
}

ここの指定が効いていて、チェックボックスの幅が880pxになっているのではないでしょうか

Answer 2

治りました。すみません　
最初に回答くださった方をベストアンサーにさせていただきました・・・。

HTMLにおいて、ID名が日本語になってたからだと思われます。
勉強がんばります。

Comments

[x_x]

提示されたコードにおいて日本語になっているところはないです。
本当に解決したのでしょうか？

[yyymmm]

ごめんなさい、今返信に気づきました汗　くわしく覚えていないのが正直なところなのですが（すみません・・・）一応解決しました。すみません、ありがとうございます。

Answer 3

label に display: block; があるからですね。
ほかのに合わせるならここも float: left では？

input#yes {
    float: left;
}