在bulma中包含html的Css标题页

Question

你好，我有个问题。

为什么我的css在html格式的头页上不起作用？

如果你想在run：https://jsfiddle.net/02kf1msd/`上看到结果，有人可以帮我找到我的代码链接。

我使用bulma作为样式。

我想有标志和菜单在同一标题行:标志在左边和菜单导航在右边。

HTML代码：

<head>
  <meta charset="utf-8">
  <title>Oumar Pathe SOW Portfolio </title>
  <!--css-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
  <link rel="stylesheet" href="src/css/main.css">
  <!--css-->
  <!--font-->
  <link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
  <!--font-->
</head>
<!--head-->

<!--body-->

<body>
  <!--head-->
  <div class="block">

    <head class="header">
      <a href="#" class="header-logo"> Oumar Pathé SOW Portfolio</a>
      <nav class="header-menu">
        <a href="#">Accueil</a>
        <a href="#">Apropos</a>
        <a href="#">Réalisations et Expériances</a>
        <a href="#">Contact</a>
      </nav>
    </head>

  </div>
  <!--head-->

CSS代码：

.header header {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  height: 70px;
  line-height: 70px;
  background-color: rgba( 0 , 0 , 0, 0);
  position:fixed;
  top: 0;
  z-index: 999;
}

.header .header-logo {
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  float: left;
  margin-left: 30px;
}

.header .header-menu{
  float: right;
  margin-right: 30px;
}

.header .header-menu a {
  margin-right: 15px;
  color: #FFFFFF;
}

.header .header-menu a:hover {
  color: #3498db;
}

为什么我的访问权限不适用于此代码？

Answer 1

有时Bulma样式会覆盖你的CSS代码，所以你需要在你的一些CSS属性后使用!important。

其次，使用navbar-end和navbar-start类来制作左侧的徽标和右侧的菜单导航，https://bulma.io/documentation/components/navbar/