Thiết kế website giá rẻ

Question

I’m trying to design a website for my friend and I’m using a table navigation bar. To avoid repeating code I put the bar code in another file and I’m using JS to load it into each current file. However, for some reason the bar is a lot thicker than it was in the original file. I’m very new to JS, so I don’t know what’s going on. Could someone help?

Reference code:
navigation bar:

<!-- NAVIGATION BAR CODE -->
<!DOCTYPE html>
<html>
<div class="header">
  <header> 
    <table style="background-image: url('assets/images/banner.png'); height: 150px;"> 
      <tr>
        <td align="center"><p style="color: black"><b>Sean's Website</b></p></td>
        <td align="center"><button class="table-button"><a class="link" href="index.html">Home</a></button></td>
        <td align="center"><button class="table-button"><a class="link" href="about.html">About</a></button></td>
        <td align="center"><button class="table-button"><a class="link" href="blog.html">Blog</a></button></td>
        <td align="center"><button class="table-button"><a class="name" href="projects.html">Projects</a></button></td>
        <td align="center"><button class="table-button"><a class="name" href="rss.html">RSS</a></button></td>
        <td align="center"><button class="table-button"><a class="name" href="downloads.html">Downloads</a></button></td>
      </tr>
    </table>
  </header>
</div>
</html>

Code with nav bar:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Sean's Website</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script>
    // loads header
    function loadHeader() {
      fetch('nav.html')
        .then(response => response.text())
        .then(data => {
          document.getElementById('replace_with_navbar').outerHTML = data;
        });
    }
    document.addEventListener('DOMContentLoaded', loadHeader);
  </script>
</head>
<body>
  <div id="replace_with_navbar"></div>
  
<br><br><br><br><br>
  
  <p class = "aligncenter">
  <img src = "assets/images/eclipse.jpg" align = "center" style="width:300px;height:360px;" alt = "For starters, here's a picture I took of the 2024 eclipse. The lens bloom shows the intersection with the moon.">  

    <br>
  </p>
  <!-- headings -->
  <h1>Hello There!</h1>
  <p>
    I’m an Applied Physics major and hobbyist programmer coming out of the United States. Stay and explore a while!
  </p>
  <script src="script.js"></script>
</body>

<footer><a href="#index.html">↑</a>  <a class="name" href="credit.html">Credits</a></footer>
</div>

</html>

CSS:

{
  height: 100%;
  width: 100%;
}

button.table-button
{
  color: #black;
  font-size: 20px;
  font-family: "Courier New", monospace;
  padding: 7px 20px;
  border-radius: 5px;
  margin: 0px 0px 0px 20px;
  background-color: transparent;
  border: transparent;
  border-radius: 5px;
  transition: 0.8s;
}

button.table-button a 
{
  text-decoration: none;
  color: #fff;
}

button.table-button:hover
{
  background-color: rgba(255,255,255);
  cursor: pointer;
  border: 3px solid black;

}
button.table-button:hover a
{
 color: black;
}

a:link,a:visited
{
  color: #31110A; 
  background-color: transparent; 
  text-decoration: none;
}

.header 
{
  padding: 0.1px;
  text-align: left;
  background: #3029E7;
  color: #black;
  font-size: 20px;
  font-family: "Courier New", monospace;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

h1
{
  text-align: left;
  color: #white;
  font-size: 20px;
  font-family: "Courier New", monospace;
}

body
{
  background: #19181D;
  font-size: 18px;
  color: white;
  font-family: "Courier New", monospace;
}

footer 
{
  text-align: center;
  padding: 3px;
  background-color: #B58B00;
  color: white;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.aligncenter 
{
    text-align: center;
}

table
{
  height: 100;
  width: 100%;
  opacity: 0.9;
  align: center;
  border: "0";
  cellpadding: "10"; 
  background-position: center;
  border-collapse: collapse;
}

tr,td
{
  border-bottom: 2px solid orange;
  font-weight: bold;
}

Page using original bar:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Sean's Website</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<script id="replace_with_navbar"></script>

<body>
  <!-- header table -->
  <div class="header">
    <header> 
      <table style="background-image: url('assets/images/banner.png'); height: 150px>
        <tr id="nav">
          <td align="center"><p style = "color: black"><b>Sean's Website</b></p></td>
          <td align="center"><button class = "table-button"><a class="link" href="index.html">Home</a></button></td>
          <td align="center"><button class = "table-button"><a class="link" href="about.html">About</a></button></td>
          <td align="center"><button class = "table-button"><a class="link" href="blog.html">Blog</a></button></td>
          <td align="center"><button class = "table-button"><a class="name" href="projects.html">Projects</a></button></td>
          <td align="center"><button class = "table-button"><a class="name" href="rss.html">RSS</a></button></td>
          <td align="center"><button class = "table-button"><a class="name" href="downloads.html">Downloads</a></button></td>
        </tr>
      </table>
    </header>
  </div>

<br><br><br><br><br>
    <br>
  </p>
  <!-- headings -->
  <h1>About Me</h1>
  <p>
    This is dummy text that will be replaced with links to actual blog posts.
  </p>
  <script src="script.js"></script>
</body>

<footer><a href="#index.html">↑</a>  <a class="name" href="credit.html">Credits</a></footer>
</div>

</html>

Images:
New bar
Old bar

I suspect that what’s going on is that the code isn’t injected properly, but I’m not sure how to debug Javascript (again, very new). I’ve tried adjusting the CSS but nothing seems to change.

Thiết kế website giá rẻ

Danh mục

How do I make the navigation bar thinner?