HTML and CSS code looks good in visual studio but when opening file on another computer stuff breaks-CodePudding

Hello everyone so I just finished my HTML project. Everything looks good in Visual Studio however when I send it to myself to open some stuff breaks. Not sure what is wrong as I have looked over it multiple times. The CSS does not show up on any of the pages for some reason and I can not figure out why. Any help would really be appreciated !

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Website Homepage</title>
</head>
<body>
    <!-- nav bar stuff -->
    <div class ="content">
        <div >
            <h1><a  href="index.html">Homepage</a></h1>
            <h2><a href="AboutMe.html">About Me</a></h2>
            <h2><a href="projects.html">Projects</a></h2>
            <h2><a href="resume.html">Resume</a></h2>

        </div>
        <h1>Name</h1>
        <p>Welcome to my website</>
    </div>

Resume page:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./style.css"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Website Homepage</title>
</head>
<body>
    <!-- nav bar stuff -->
    <div class ="content">
        <div >
            <h1><a href="index.html">Back to homepage</a></h1> 
            <h2><a href="AboutMe.html">About Me</a></h2>
            <h2><a href="projects.html">Projects</a></h2>
            <h2><a  href="resume.html">Resume</a></h2>

This is the CSS Code:

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: tan;
  }
  
  .topnav {
    overflow: hidden;
    background-color: burlywood;
    border-radius: 25px;
  }
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  .topnav a:hover {
    color: lightskyblue;
    
  }
  
  .topnav a.active {
    background-image: none;
    color: lightskyblue;
    font-weight: bold;
    border-color: lightskyblue;
    border-radius: 50px;
    border-style: hidden;
  }
  .content {
    margin-left: 30px;
    position: scroll;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
  }

CodePudding user response：

You can try creating simple html first and link the css, make sure they are connected together, after that find out whats wrong, maybe the location only.

CodePudding user response：

Please check your files locations for css files