I have problems on Html file

November 30, 2022

Hi i’m making a website but im having two problems

My html file doesnt saw my css file. My Html file is Website/html/index.html and Css file is Website/css/index.css
Even though i do text-align: center;(css file line:22) my list doesnt become straight line

My Html code

<html lang="en">
  <head>
    <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>KK Kiralama</title>
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
    <header class="kk-header">
      <div class="kk-container">
        <nav class="kk_nav">
          <li><a href="index.html">Ana Sayfa</a></li>
          <li><a href="Hakkimizda.html">Hakkımızda</a></li>
          <li><a href="Araclarımız.html">Araçlarımız</a></li>
          <li><a href="Iletisim.html">İletişim</a></li>
          <li style="float:right"><a href="Giris.html">Giriş</a></li>
        </nav>
      </div>
    </header>

My Css code

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;}
html{
    font-size: 60%;
}

.kk-header{
    width: 100%;
    background-color:#191970;
}
.kk-nav{
  overflow: hidden;
  background-color: #191970;
}
.kk-nav a{
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


Thanks for any help!
Also im open to any advice on making this code more smooth

>Solution :

First of all, try adding two dots to your CSS path. href="../css/index.css"
Then for the alignment, add display: flex; to the kk-nav shown below.

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;}
html{
    font-size: 60%;
}

.kk-header{
    width: 100%;
    background-color:#191970;
}
.kk-nav{
  overflow: hidden;
  background-color: #191970;
display: flex;
}

.kk-nav li a{
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

<body>
    <header class="kk-header">
      <div class="kk-container">
        <nav class="kk-nav">
          <li><a href="index.html">Ana Sayfa</a></li>
          <li><a href="Hakkimizda.html">Hakkımızda</a></li>
          <li><a href="Araclarımız.html">Araçlarımız</a></li>
          <li><a href="Iletisim.html">İletişim</a></li>
          <li style="float:right"><a href="Giris.html">Giriş</a></li>
        </nav>
      </div>
    </header>