css - 固定幅ではなく可変幅を要素またはコンテナに追加する方法は?

Question

配置と可変幅について質問があります。私が使用した：

*{
border: 1px dotted blue; /*indicator for where every element are positioned or spaced on the page*/
}

コードのコメントで述べたように、すべての要素でこれを使用して、すべてがどこに配置されているかを確認しました。すべての要素のデフォルトの幅が 100% になっていることに気付きました。同じ行に固定幅ではなく、可変幅を設定する方法を知りたいです。そうすれば、要素やコンテナにテキストやコンテンツを追加するときに、固定幅を変更し続けたり、要素を何度も移動して揃えたりする必要がなくなります。たとえば、私のフッター:

<div class="footer">
        <p id="copyright">&copy; 2013 Jaime Penzellna</p>

        <!--SOCIAL MEDIA-->
        <ul id="social_media">
            <li>Facebook</li>
            <li>Instagram</li>
            <li>LinkedIn</li>
            <li>Codecademy</li>
            <li>Flickr</li>
        </ul>
</div>

現在、social_media タグは幅 100% の新しい行にあり、

著作権タグ。私がしたいのは、pとulを取り、固定幅を使用せずに同じ行に配置することですが、可変幅なので、テキストを柔軟に追加でき、それに基づいて幅が増加し、それらを削除すると減少します。どうすればいいですか?ありがとう!