【模写】メインコンテンツを完成させたい

前提・実現したいこと

【ヘッダーの完成html及びcss】
練習のためコーポレートサイトの模写をしています。
自力で解決できなかった問題点3点です。
①下線を消したい。
②見本通りに3本、線を引きたい。
~~③左全体に余白を設けたい。~~　※こちら質問文を作成中に閃き、解決しました。

ご教授の程、宜しくお願い致します。

■見本と模写サイトのリンク
・見本サイト　※模写サイトを提供してるサイト主様がこちらポートフォリオに使ってOKと許可を出しております。
・模写サイト

■使用言語
・HTML
・CSS

■レンタルサーバー
・さくらインターネット（ライト）

■プログラミング経験
・経験年数：4か月
・学習方法：Progate歴3ヶ月（HTML,CSS）
・コードを見た時に何が書いてあるか理解できますが、
私自身で記述できるレベルには到達していません。
↓
2021年3月4日
自力での模写に挑戦中
※ルール：ググるorTeratailで教えて頂き完成を目指す

発生している問題・エラーメッセージ

■エラーページ↓↓

■見本ページ↓↓

該当のソースコード

ソースコード：

■■■HTML■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<meta name="robots" content="noindex , nofollow">
 <head>
  <title>corporate-site</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="reset.css" type="text/css" media="screen">
  <link rel="stylesheet" href="style.css" type="text/css" media="screen">
 </head>
 <body>
  <div class="header-container">
  <header class="wrap">
   <h1 id="header"><a href="#"><img class="logo" src="img/header_logo.png" alt="logo" width="139px" height="60px"></a></h1>  
   <ul class="sec-navi">
    <li class="header-list"><a href="#">企業理念</a></li>
    <li class="header-list"><a href="#">施工事例</a>
    <li class="header-list"><a href="#">採用情報</a>
    <li class="header-list"><a href="#">お問い合わせ</a>
   </ul>
   <p class="mainvisual-text">街を作る。未来を作る。
  </header>
  </div>

  <section id="sec-about">
   <h2 class="about">お知らせ</h2>
   <a href="#">
    <div class="about1">2020.11.17</div>
    <div class="about2">お知らせ</div>
    <div class="about3">本社打合せ室が完成しました。</div>
   </a>
   <a href="#">
    <div class="about1">2020.11.10</div>
    <div class="about2">お知らせ</div>
    <div class="about3">【メディア掲載】住宅雑誌2020年11月号</div>
   </a>
   <a href="#">
    <div class="about1">2020.11.01</div>
    <div class="about2">お知らせ</div>
    <div class="about3">ホームページが完成しました。</div>
   </a>
  </section> 
</body>
</html>

■■■CSS■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
@charset "UTF-8";

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 vertical-align:baseline;
 background:transparent;
}

.mainvisual {
 position: relative;
 width: 500px;
}

header {
 background-image: url(img/main.png);
 background-repeat: no-repeat;
 background-position: center;
 height: 75vh;
 background-size: cover;
 position: relative;
}

.sec-navi {
 margin-right: 0px;
}

a {
 color: gray;
}

a:hover {
 opacity: 0.5;
}

.header-container {
    max-width: 1100px;
    margin: 0 auto;
}

.header-list {
 display: inline-block;
 list-style: none;
 vertical-align: middle;
 float: right;
 margin-right: 55px;
 margin-top: 55px;
 justify-content: space-between;
}

.header-list a {
 text-decoration: none;
}

.logo {
 float: left;
 margin-top: 30px;
}

.mainvisual-text {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%);
 width: 100%;
 text-align: center;
 font-size: 48px;
}

#sec-about {
 padding-right: 10px;
}

.about {
 text-align: center;
 margin-top: 45px;
 margin-bottom: 35px;
 font-size; 24px;
 
}

.about1 {
 display: block;
 font-size: 14px;
 float: left;
 margin-bottom: 15px;
}

.about2 {
 font-size: 11px;
 border: 1px solid #000;
 display: inline-block;
 padding: 3px 6px;
 margin: 0 30px;
 margin-bottom: 15px;
}

.about3 {
 font-size: 18px;
 text-decoration: none;
 margin-bottom: 15px;
}

試したこと

＞①下線を消したい。
基本のtext-decoration: none;を試しましたが消えません。
CSSの優先順位的に負けていると考え、!importantで検証しましたが変化はありませんでした。

＞②見本通りに3本、線を引きたい。

<hr>と見た目が違い、見本のコードも見ましたがどこに書いてあるのか分かりませんでした。

＞③左全体に余白を設けたい。
padding-left; 30pxで解決しました。

補足情報（FW/ツールのバージョンなど）

■使用ツール
・Terapad

行動規範の内容に同意します

回答2件

前から少し思ってたのですが、

※ルール：ググるorTeratailで教えて頂き完成を目指す

これだと他人任せ感が強いですし、自力には繋がりにくいです。
お手本が目の前にあるのですから、「差異を直接確認して吸収する」を優先されたほうが良いと思います。

いずれにしても、ポートフォリオ作成して就活などに使いたいという当面の目標があるのでしたら、
目の前のコードをきちんと理解して使いこなす力は必須になってきますし。

つまり「考える力」を養うこと。

実務では別にカンニングという概念はないですし、「理解して使いこなす力」は必須です。
※コンセプトまで含めて丸々コピーとかは著作権に関わってくるけど、実装の仕方とか参考にするのは良くある話
ほとんどのケースで何も参考にせず1から組み上げるということはないです。

「これどうやって作ってるんだろう」とソースを追うのも地力を上げる手段としては有効です。

投稿2021/03/06 09:24

編集2021/03/06 09:27

m.ts10806

総合スコア80850

m.ts10806

2021/03/06 10:55 編集

模写することが目的になってるならそれはかえたほうがいい。一般論としては、過程やスキルアップの手段の一つでしかないはずです。

JAQKxsuke

2021/03/07 00:12

＞お手本が目の前にあるのですから、「差異を直接確認して吸収する」を優先されたほうが良いと思います。ググる→検証→Teratailの順で進めています。以前、ネット検索は30分を目安として、それでも分からなければ聞いた方が良いとあったのでそれを実践していました。ただ、現在見本との差異を見つけられていないので、今後は見つけることにもう少し時間を割いてみます。＞模写することが目的になってるならそれはかえたほうがいい。模写してコードの書き方とその仕組みを学ぶよう取り組みます。

m.ts10806

2021/03/07 10:04 編集

>ググる→検証→Teratailの順で進めています。質問に書いてなければ回答には考慮されません。目の前に答えがある現状では「Teratail」の時点で聞くことは「これはどういう意図でこう組んでるのか」という質問になると思います。正しくお手本を検証しているのであれば。それだけ検証を使いこなせてないか、理解できないまま何となく組んでるかどっちかに感じます。

JAQKxsuke

2021/03/07 13:10

はい、検証にも制限時間を設けているため、分からない時はこちらで質問させて頂いております。その為、言い方は悪いですが、仰る通り正しくお手本を検証する力はまだ身についておりません。永遠とググっていると、私自身が挫折した経験がある為、制限時間を設けています。教えて貰うことで前に進め、徐々にではありますが理解できるようになり、迷惑をかけないように努めております。

m.ts10806

2021/03/07 20:40

質問に書いてなければ回答には考慮されません。

JAQKxsuke

2021/03/08 11:23

ありがとうございました。

m.ts10806

2021/03/09 06:43 編集

あと、回答者はあくまでプログラミングをある程度わかってるだけの赤の他人なので、エスパーでも神様でも先輩や上司でもないので誤解なきよう。質問内容の充実が解決と理解への近道です。プログラムは書いたとおりにしか動かない。それゆえルール的なところは厳しく見てる人も多く、ルールに沿ってないな今後苦労するだろうなと感じ老婆心ながら淡々と厚意で指摘してるだけのところ、高圧的だマウントだ（外でも中でも）言われる筋合いはないです（一部の荒らしや自分ルールのみ適用したい相手を除いて質問者を潰そうと思ってる人はいないです。そこはご安心を。）ただ、いずれにしても赤の他人に自身の状況を過不足なく伝えられるようになってから文句言ってください。あくまで厚意で成り立っている場です。

JAQKxsuke

2021/03/09 11:35

>質問内容の充実が解決と理解への近道です。参考にさせていただきます。＞ルールに沿ってないな今後苦労するだろうなと感じ老婆心ながら淡々と厚意で指摘してるだけのところ。質問内容は改善しているつもりではありますが、至らない所もあるかと思います。そこは素直に受け取り、分かりやすい質問を心掛けます。＞あくまで厚意で成り立っている場です。感謝の気持ちは忘れず、厚意で成立している場で教えて頂いていることに感謝します。

行動規範の内容に同意します