82327


[コチラ](https://codepen.io/scanfcode/pen/MEZPNd) を見本にFooterを作成してみましたが、うまくいきません。  
どこを調整すれば、きちんと反映されるのでしょうか？

**具体的にどのようにしたいのか**  
まず、見本のように横いっぱいにFooterを広げたいです。  
そして、見本でいうAboutのあたりにコピーライトを、見本のカテゴリーにはカテゴリーを配置したいです。カテゴリーは上から縦に並べます。色味に関しては#f2f2f2を基調としたいです。

[code]

    footer.site-footer
    {
       background-color:#f2f2f2;
       padding:45px 0 20px;
       font-size:15px;
       line-height:24px;
       color:#807e7e;
    }
    footer.site-footer hr
    {
      opacity:0.5
    }
    footer.site-footer hr.small
    {
      margin:20px 0
    }
    footer.site-footer h6
    {
      font-size:16px;
      color:#807e7e;
      text-transform:uppercase;
      margin-top:5px;
      letter-spacing:2px
    }
    footer.site-footer a
    {
      color:#807e7e;
    }
    footer.site-footer a:hover
    {
      color:#3366cc;
      text-decoration:none;
    }
    ul.footer-links
    {
      list-style: none;
      padding-left:0;
      list-style:none;
    }
    ul.footer-links li
    {
      display:block
      list-style:none;
    }
    
    ul.footer-links a:active,.footer-links a:focus,.footer-links a:hover
    {
      text-decoration:none;
    }
    ul.footer-links.inline li
    {
      display:inline-block
    }
    footer.site-footer
    {
      text-align:right
    }
    footer.site-footer
    {
      width:40px;
      height:40px;
      line-height:40px;
      margin-left:6px;
      margin-right:0;
      border-radius:100%;
      background-color:#33353d
    }
    
    li.footer-item{
    list-style:none;
    }
    
    @media (max-width:991px)
    {
      footer.site-footer [class^=col-]
      {
        margin-bottom:30px
      }
    }
    @media (max-width:767px)
    {
      footer.site-footer
      {
        padding-bottom:0
      }
      footer.site-footer
      {
        text-align:center
      }
    }
[/code]

[code]

    <footer class="site-footer">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-6">
            <p class="text-justify">© 2021 Copyright: <a class="text-reset fw-bold" href="#">XXXXXXXXXXXXXX</a></p>
          </div>
          <div class="col-xs-6 col-md-3">
            <h6>Categories</h6>
              <ul class="footer-links">
                  {% for item in footer.menu_items.all %}
                    <li class="footer-item">
                        <a href="{{ item.link }}" class="footer-link text-reset" aria-current="page" {% if item.open_in_new_tab %} target="_blank"{% endif %}>{{ item.title }}</a>
                    </li>
                  {% endfor %}
              </ul>
          </div>
          <div class="col-xs-6 col-md-3">
              <h6>Categories</h6>
              <ul class="footer-links">
                  {% for item in footer.menu_items.all %}
                      <li class="footer-item">
                          <a href="{{ item.link }}" class="footer-link text-reset" aria-current="page" {% if item.open_in_new_tab %} target="_blank"{% endif %}>{{ item.title }}</a>
                      </li>
                  {% endfor %}
              </ul>
          </div>
            <hr>
        </div>
      </div>
    </footer>
[/code]


CC BY-SA 4.0
2021-09-02T13:04:32.080
82186
2021-09-08T01:58:56.173
2021-09-03T08:39:27.613
48024
48024
question
html css
ちゃんとFooterの形にしたいです。


まず第一として、参考にしているサイトはBootstrap jQuery fontawesome
のライブラリを利用しているようです。まずはそれをきちんと記述するようにしましょう。

※コピーライト等も表示されていると思いますが、よくわからない丸い楕円が存在しています。  
これは質問中に要件もなく、何をしたいのかよくわからないので、ご自身で調整をしてみてください。

[code]

    footer.site-footer
    {
       background-color:#f2f2f2;
       padding:45px 0 20px;
       font-size:15px;
       line-height:24px;
       color:#807e7e;
    }
    footer.site-footer hr
    {
      opacity:0.5
    }
    footer.site-footer hr.small
    {
      margin:20px 0
    }
    footer.site-footer h6
    {
      font-size:16px;
      color:#807e7e;
      text-transform:uppercase;
      margin-top:5px;
      letter-spacing:2px
    }
    footer.site-footer a
    {
      color:#807e7e;
    }
    footer.site-footer a:hover
    {
      color:#3366cc;
      text-decoration:none;
    }
    ul.footer-links
    {
      list-style: none;
      padding-left:0;
      list-style:none;
    }
    ul.footer-links li
    {
      display:block
      list-style:none;
    }
    
    ul.footer-links a:active,.footer-links a:focus,.footer-links a:hover
    {
      text-decoration:none;
    }
    ul.footer-links.inline li
    {
      display:inline-block
    }
    footer.site-footer
    {
      text-align:right
    }
    footer.site-footer
    {
      width:40px;
      height:40px;
      line-height:40px;
      margin-left:6px;
      margin-right:0;
      border-radius:100%;
      background-color:#33353d
    }
    
    li.footer-item{
    list-style:none;
    }
    
    @media (max-width:991px)
    {
      footer.site-footer [class^=col-]
      {
        margin-bottom:30px
      }
    }
    @media (max-width:767px)
    {
      footer.site-footer
      {
        padding-bottom:0
      }
      footer.site-footer
      {
        text-align:center
      }
    }
[/code]

[code]

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
    <footer class="site-footer">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-6">
            <p class="text-justify">© 2021 Copyright: <a class="text-reset fw-bold" href="#">XXXXXXXXXXXXXX</a></p>
          </div>
          <div class="col-xs-6 col-md-3">
            <h6>Categories</h6>
              <ul class="footer-links">
                  {% for item in footer.menu_items.all %}
                    <li class="footer-item">
                        <a href="{{ item.link }}" class="footer-link text-reset" aria-current="page" {% if item.open_in_new_tab %} target="_blank"{% endif %}>{{ item.title }}</a>
                    </li>
                  {% endfor %}
              </ul>
          </div>
          <div class="col-xs-6 col-md-3">
              <h6>Categories</h6>
              <ul class="footer-links">
                  {% for item in footer.menu_items.all %}
                      <li class="footer-item">
                          <a href="{{ item.link }}" class="footer-link text-reset" aria-current="page" {% if item.open_in_new_tab %} target="_blank"{% endif %}>{{ item.title }}</a>
                      </li>
                  {% endfor %}
              </ul>
          </div>
            <hr>
        </div>
      </div>
    </footer>
[/code]


CC BY-SA 4.0
2021-09-08T01:58:56.173
82327
2021-09-08T01:58:56.173
22665
82186
answer