CSS右寄せについて

Question

CSSにてフッター内のcopyright、メニュー部分をフッターの一番右まで寄せたいのですが、
どうしてもうまくいきません。(これだけで、今日丸一日潰してしまいました。。。)

CSS記述前の状態

CSS記述後の状態

色々しらべながらやっているのですが、訳がわからなくなってきてしまい
ドバイスいただけたらと思います。

<footer>
        <div id="footer-left">
          <div id="footer-logo">
            <img src="img/footer_logo.png" alt="画像">
          </div>

          <address id="address">
            〒111-111<br>
            東京都新宿区○○タワー20F<br>
            TEL：[phone]<br>
            FAX：[phone]
          </address>
        </div>

        <div id="footer-right">
          <nav id="fNav">
            <ul>
              <li><a href="index.html">ホーム</a></li>
              <li><a href="business.html">事業内容</a></li>
              <li><a href="about.html">会社概要</a></li>
              <li><a href="contact.html">お問い合わせ</a></li>
            </ul>
          </nav>

          <small id="copyright">
            株式会社■■■<br>
            Copyright　(C) 2017/1/1 ■■■
          </small>
        </div>
      </footer>

footer{
  border: solid 0.5px;
  display: flex;

}

#footer-left{
  width: 300px;

}


#footer-right{
  width: 600px;
}

#address{
  font-size: 12px;
  padding-top: 10px;

}

#copyright{
  display: block;    /*①ブロック要素へ*/
  text-align: right; /*②右揃えへ*/
}
/* フッターナビ */

#fNav{
  border: solid 1px;
  padding-right: 0px;
}

#fNav ul{
  
}

#fNav li{
  margin-bottom: 30px;
  display: inline-block; /*③インライン要素にして横並びに*/

}

宜しくお願い致します。

Answer 1

どっかで見た質問だなぁと思ったらちょっと前にほぼ同じ質問してますよね？

その際と全く同じに思えますが前回の私も含め数件の回答は参考になりませんでしたか？

Comments

[退会済みユーザー]

あれから色々試したのですが、なにをやっても右寄せにならなくて、再度調べ直しながら
やっているのですが、一体どこがいけないのか、さっぱりわからない状態です。。。
これは、もう、才能やセンスがなさすぎるのでしょうかね。。。

[amaryllis]

右寄せは、marginを使います。
margin-right: auto;
でOKです。

[amaryllis]

↑
言い忘れた
marginだけではなく幅指定の
width: 300px;のようなのも加えること。

Answer 2

こういうことですか？
サンプル

<footer>
	<div id="footer-left">
		<div id="footer-logo">
			<img src="http://placehold.jp/3d4070/ffffff/200x50.png?text=LOGO" alt="画像">
		</div>
		<address id="address">
			〒111-111<br>
			東京都新宿区○○タワー20F<br>
			TEL：[phone]<br>
			FAX：[phone]
		</address>
	</div><!-- end #footer-left -->

	<div id="footer-right">
		<nav id="fNav">
			<ul>
				<li><a href="index.html">ホーム</a></li>
				<li><a href="business.html">事業内容</a></li>
				<li><a href="about.html">会社概要</a></li>
				<li><a href="contact.html">お問い合わせ</a></li>
			</ul>
		</nav>
		<small id="copyright">
			株式会社■■■<br>
			Copyright　(C) 2017/1/1 ■■■
		</small>
	</div><!-- end #footer-right -->
</footer>

footer{
  display: -webkit-flex; /* Safari */
  display: flex;
}

#footer-left{
  width: 300px;
}

#footer-right{
  flex:1 1 auto;
}

#address{
  font-size: 12px;
  padding-top: 10px;
}

#copyright{
  display: block;    /*①ブロック要素へ*/
  text-align: right; /*②右揃えへ*/
}
/* フッターナビ */

#fNav ul{
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-justify-content: flex-end; /* Safari */
  justify-content:         flex-end;
}

#fNav li{
  margin-left: 30px;
}

Answer 3

#fNav ul{
    text-align: right;
}
```**動くサンプル：**[https://jsfiddle.net/3ztr8yhs/](https://jsfiddle.net/3ztr8yhs/)