CSSのコードの書き方を教えてください。
解決したいこと
①ヘッダーの上と左右にできた隙間を消したい。白で埋め尽くした状態にしたい。
②ヘッダー部分の「ロゴ＋文字」と「検索ツール」を「家庭で簡単 料理特集」の画像の幅に合わせたい。
③「料理別レシピ」のボックスを少し右に広げたい。
発生している問題・エラー
paddingやmarginのプロパティを使用していますが、cssがうまく適用されません。
一つ触ると崩れてしまうようになってしまい、どこの箇所が間違っているのか一向に見当が付かず、頭を悩ませています。
良ければ、HTMLとcssで修正及び加筆がある部分は、具体的なコードを教えていただけると助かります。よろしくお願いいたします。
〈HTML〉
<!DOCTYPE html>
CookCamp
誰でも作れる簡単料理レシピ掲載サイト
料理別レシピ
〈css〉
body {
font-size: 12px;
background: #fffacd;
}
a {
font-size: 8px;
color: #000000;
text-decoration: none;
}
ul {
padding: 0;
list-style: none;
}
nav li {
background-repeat: no-repeat;
background-position: 10px 50%;
padding-left: 10px;
margin: 0px;
border-bottom: 1px dotted #d3d3d3;
line-height: 10px 20px;
text-align: left;
}
button {
border: none;
padding: 0;
cursor: pointer;
font-size: 12px;
}
/*
header
====================================== */
main {
display: flex;
width: 960px;
font-size: 14px;
color: #664433;
border-bottom: solid 1px #cccccc;
margin-top:10px;
}
header{
background-color: white;
border-bottom: solid 1px #cccccc;
}
.width100 {
width: 100%;
}
.cate_navi ul {
width: 960px;
list-style: none;
margin: 0px auto 0;
text-align: center;
display: flex;
padding: 0;
}
.cate_navi li {
flex: 1;
text-align: center;
}
.cate_navi li+li {
border-left: 1px solid #333;
}
.container {
width: 960px;
margin: 0 auto;
}
==割愛==
.nav_content {
background-color: #ffffff;
margin-top: 10px;
margin-bottom: 15px;
margin-right: 20px;
padding: 10px;
}
h2 {
color: #ffffff;
background-color: #99bb22;
background-image: url(images/dish.png);
background-repeat: no-repeat;
background-position: 10px 50%;
padding-left: 40px;
border-radius: 40px;
font-size: 18px;
margin: 0px;
}
