Search code examples
htmlcsshyperlinktext-align

I have problems on Html file


Hi I'm making a website but I'm having two problems

  1. My HTML file doesn't see my CSS file. My Html file is Website/html/index.html and my CSS file is Website/css/index.css
  2. Even though i do text-align: center;(CSS file line:22) my list doesn't 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, I'm 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>