orderを実装後にaタグの指定範囲が勝手に広がり、元に戻したい。order実装後も順番が変わらない原因を知りたいです。

前提

プログラミング初心者です。
HTMLとCSSを学んでいます。

■不具合内容：

・「aタグ」の指定範囲が広がる。
（<h3>サービス２</h3>と直下<p>タグ文面と、画像「img/img06」まで）
・aタグの指定範囲内のテキストに下線がつく。
・aタグ範囲内でクリックすると指定先リンクへ飛ぶ。
・orderを実装しても、画像とテキストが交互に入れ替わらない。
（テキスト4の画像とテキストは目的通り、交互に順番が変わりました。）

■不具合が起きたタイミング：
下記ソースコードにある、

<h3>サービス２</h3>と、 <h3>サービス4</h3>に配置した、

画像とテキストの順番を、左右交互にする目的で、
（bootstrapで確認した「orber-md-1」と「orber-md-2」）を
実装しました。その直後、不具合が起きました。

■orderを書き込んだ箇所：
テキスト：
「<h3>サービス２</h3>」と「<h3>サービス4</h3>」と、
「<p>ここにテキストが入ります。</p>」を囲った
「<div>タグ」に、
「<div class="col-md-6 order-md-1">」と書き込む。

画像：
サービス2 <img src="img/img06.jpg" class="img-fluid" alt="画像6です">を囲った

<div>タグに <div class="col-md-6 order-md-2" id="service2">と書き込む。

サービス4 <img src="img/img08.jpg" class="img-fluid" alt="画像8です">を囲った

<div>タグに <div class="col-md-6 order-md-2" id="service4">と書き込む。 ### 実現したいこと** 1「.aタグ」の指定範囲を、テキストの下に実装した「Lightボタン」だけに収めたいです。 2.最初の目的の画像とテキストを左右入替したいです。**

該当のソースコード HTML

コード

<html lang="azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC">
  <head>
<meta charset="utf-8"
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Edu+VIC+WA+NT+Beginner:wght@500&family=Shadows+Into+Light&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/205b28f9d8.js" crossorigin="anonymous"></script>
    <title>corporatesite</title>
  </head>
  <body>
   
  <header>
    <div class="top-img">
    <div class="top-text">
      <h1>Corporate Site</h1>
      <p>弊社は会社情報を伝えるサイトです。</p>
    </div>
    </div>
  </header>

  <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#"><h3>Corporate Site</h3></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link" aria-current="page" href="#"><i class="fa-solid fa-house-chimney"></i>Home</a>
          <a class="nav-link" href="#feature"><i class="fa-solid fa-lightbulb"></i>Features</a>
          <a class="nav-link" href="#service"><i class="fa-solid fa-list-ul"></i>Service</a>
          <a class="nav-link" href="#information" tabindex="-1" aria-disabled="true"><i class="fa-solid fa-info"></i>Information</a>
        </div>
      </div>
    </div>
  </nav>

  <div class="feature-area" id="feature">
    <h2>Feature</h2>
    <p>弊社は株式会社〇〇です<br>
      ここに企業理念が入ります。</p>
  </div>

  <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="img/img03.jpg" class="d-block w-100" alt="画像3です">
        <div class="carousel-caption d-none d-md-block">
          <h5>1枚目の画像です。</h5>
          <p>説明が入ります。</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="img/img04.jpg" class="d-block w-100" alt="画像4です">
        <div class="carousel-caption d-none d-md-block">
          <h5>2枚目の画像です。</h5>
          <p>説明が入ります。</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="img/img05.jpg" class="d-block w-100" alt="画像5です">
        <div class="carousel-caption d-none d-md-block">
          <h5>3枚目の画像です。</h5>
          <p>説明が入ります。</p>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>

<div class="service-list" id="service">
    <h2>Service</h2>
    <div class="container">

      <div class="row service-description">
        <div class="col-md-6">
          <img src="img/img05.jpg" class="img-fluid" alt="画像5です">
        </div>
        <div class="col-md-6" id="service1">
          <h3>サービス１</h3>
          <p>サービス１ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
            ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
          <a href="https://getbootstrap.jp/" target=" blank"><button type="button" class="btn btn-light">Light</button>
        </div>
      </div>

      <div class="row service-description">
        <div class="col-md-6 order-md-2" id="service2">
          <img src="img/img06.jpg" class="img-fluid" alt="画像6です">
        </div>
        <div class="col-md-6 order-md-1">
          <h3>サービス２</h3>
          <p>サービス２ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
            ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
            ここにテキストが入ります。ここにテキストが入ります。</p>
            <a href="https://getbootstrap.jp/"><button type="button" class="btn btn-light">Light</button></a>
        </div>
      </div>

      <div class="row service-description">
        <div class="col-md-6" id="service3">
          <img src="img/img07.jpg" class="img-fluid" alt="画像7です">
        </div>

        <div class="col-md-6">
          <h3>サービス３</h3>
          <p>サービス３ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
            ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
          <a href="https://getbootstrap.jp/" target=" blank"><button type="button" class="btn btn-light">Light</button></a>
        </div>
      </div>
      <div class="row service-description">
        <div class="col-md-6 order-md-2" id="service4">
          <img src="img/img08.jpg" class="img-fluid" alt="画像8です">
        </div>
        <div class="col-md-6 order-md-1">
          <h3>サービス４</h3>
          <p>サービス４ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
            ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
          <a href="https://getbootstrap.jp/" target=" blank"><button type="button" class="btn btn-light">Light</button></a>
        </div>
      </div>
    </div>
</div>
<div class="feature-area" id="information">
  <h2>Information</h2>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="info">
          <i class="fa-solid fa-user fa-4x"></i>
          <p>商品説明が入ります。商品説明が入ります。</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="info">
          <i class="fa-solid fa-diagram-project fa-4x"></i>
          <p>商品説明が入ります。商品説明が入ります。</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="info">
          <i class="fa-solid fa-laptop-code fa-4x"></i>
          <p>商品説明が入ります。商品説明が入ります。</p>
        </div>
      </div>
    </div>
  </div>
</div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>
### 該当のソースコード　CSS
*{
  margin:0;
  padding:0;
  color: #fff;
 }
 
 .top-img{
  background-image:url(../img/img01.jpg);
  background-size:cover;
  background-attachment:fixed;
 }
 
 .top-text{
  text-align:center;
  padding: 250px 0px;
 }
 
 .top-text h1{
  font-size: 100px;
  font-family: 'Dancing Script', cursive;
  font-family: 'Edu VIC WA NT Beginner', cursive;
  font-family: 'Shadows Into Light', cursive;
 }
 
 nav h3{
  font-family: 'Dancing Script', cursive;
 font-family: 'Edu VIC WA NT Beginner', cursive;
 font-family: 'Shadows Into Light', cursive;
  color: black;
 }
 nav i{
  color:#888
 }
 
 .feature-area{
 background-image:url(../img/img02.jpg);
 background-attachment:fixed;
 background-size:cover;
 padding:250px 0;
 text-align:center;
 }
 
 .feature-area h2{
 font-size:80px;
 font-family: 'Dancing Script', cursive;
 font-family: 'Edu VIC WA NT Beginner', cursive;
 font-family: 'Shadows Into Light', cursive;
 margin:40px;
 }
 
 .service-list{
 background-color:black;
 text-align:center;
 padding:50px;
 
 }
 .service-list h2{
 padding:50px;
 font-size:80px;
 font-family: 'Dancing Script', cursive;
 font-family: 'Edu VIC WA NT Beginner', cursive;
 font-family: 'Shadows Into Light', cursive;
 }
 
 .service-description{
 padding:30px;
 }
 #service a{
 text-decoration:none;
 display: block;
 }
 
----------------------------------------------

### 試したこと
・CSSで「text-decoration」プロパティ指定し下線消しました。
・デベロッパーツールから検証し、不具合発端となった可能性がある「order」消去し、
元に戻るか確認するも戻りませんでした。
・そのほかあちこち消したり順番変えるも、改善にならず。
よろしくお願いいたします。