回答編集履歴

3 Markdownのバグ修正

liveasnotes

liveasnotes score 1227

2018/08/16 23:24  投稿

width:100%;なら,float:left;しても位置が変わらないのは当たり前です.
(親要素の幅いっぱいに,その要素自身の幅も広げられているのですから,それ以上,左右に動きようがありません)
```.container```か```.main.posts-index```か,さらにその上にかぶさっている要素のどれかの指定を変える必要があります
(親要素の幅いっぱいに,その要素自身の幅も広げられているのですから,それ以上,左右に動きようがありません)```.container```か,```.main.posts-index```か,さらにその上にかぶさっている要素のどれかの指定を変える必要があります
現状では提示されているソースコードがHTML,CSSともに不足しているので,全体像が分かるように,提示するコードを増やしてください.
もし,どの部分を見せればよいか分からず,また既にネット上に公開されているなら,そのリンクを貼ってください.
尚,通常HTMLにおいては,左上から要素が配置されるので,
左側が空白なら,特に指定されていない限りは,左寄せになるはずです
---
追記(20180816)
# 追記(20180816)
```css
.main {
 position: absolute;
 top: 64px;
 width: 100%;/*画面幅いっぱいに広がっている?*/
 height: auto;
 min-height: 100%;
 background-color: #f5f8fa;
}
.container {
 max-width: 600px;
 margin: 60px auto;
 /*margin: 上下余白 左右余白; ←左右余白にautoが指定:左右中央寄せ*/
 padding-left: 15px;
 padding-right: 15px;
 clear: both;
}
```
もし,「投稿一覧」が画面全体を覆っている(```.main```がbody要素の直下にある)なら,```.container```の```margin```を調節すればよいと考えられます
```margin: 60px 0;```を指定してみてください
上手くいかない場合は,サイトのスクリーンショットと,各枠がどのCSSセレクタと紐付いているか分かるよう説明を書き加えてください.
2 追記

liveasnotes

liveasnotes score 1227

2018/08/16 23:19  投稿

width:100%;なら,float:left;しても位置が変わらないのは当たり前です.
(親要素の幅いっぱいに,その要素自身の幅も広げられているのですから,それ以上,左右に動きようがありません)
```.container```か```.main.posts-index```か,さらにその上にかぶさっている要素のどれかの指定を変える必要があります
現状では提示されているソースコードがHTML,CSSともに不足しているので,全体像が分かるように,提示するコードを増やしてください.
もし,どの部分を見せればよいか分からず,また既にネット上に公開されているなら,そのリンクを貼ってください.
尚,通常HTMLにおいては,左上から要素が配置されるので,
左側が空白なら,特に指定されていない限りは,左寄せになるはずです
左側が空白なら,特に指定されていない限りは,左寄せになるはずです
---
追記(20180816)
```css
.main {
 position: absolute;
 top: 64px;
 width: 100%;/*画面幅いっぱいに広がっている?*/
 height: auto;
 min-height: 100%;
 background-color: #f5f8fa;
}
.container {
 max-width: 600px;
 margin: 60px auto;
 /*margin: 上下余白 左右余白; ←左右余白にautoが指定:左右中央寄せ*/
 padding-left: 15px;
 padding-right: 15px;
 clear: both;
}
```
もし,「投稿一覧」が画面全体を覆っている(```.main```がbody要素の直下にある)なら,```.container```の```margin```を調節すればよいと考えられます
```margin: 60px 0;```を指定してみてください
上手くいかない場合は,サイトのスクリーンショットと,各枠がどのCSSセレクタと紐付いているか分かるよう説明を書き加えてください.
1 追記

liveasnotes

liveasnotes score 1227

2018/08/16 20:23  投稿

width:100%;なら,
float:left;しても位置が変わらないのは当たり前です.
width:100%;なら,float:left;しても位置が変わらないのは当たり前です.
(親要素の幅いっぱいに,その要素自身の幅も広げられているのですから,それ以上,左右に動きようがありません)
```.container```か```.main.posts-index```か,さらにその上にかぶさっている要素のどれかの指定を変える必要があります
現状では提示されているソースコードがHTML,CSSともに不足しているので,全体像が分かるように,提示するコードを増やしてください.
もし,どの部分を見せればよいか分からず,また既にネット上に公開されているなら,そのリンクを貼ってください.
尚,通常HTMLにおいては,左上から要素が配置されるので,
左側が空白なら,特に指定されていない限りは,左寄せになるはずです

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る