将 <h1> Header 移动到导航栏上方

Question

在我的程序中，我决定为页面标题添加一个 header。问题是新的 header 不会超出导航栏。然而，在某一时刻它奏效了； none 格式连接。现在我的文本格式几乎正确（颜色仍然不正确），它的位置又被关闭了。

这是短代码：

更多我的代码：

#screen {}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #DAE6F0;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
}

#header {
    margin-top: 100px;
    margin-bottom: 45px;
}

#gradient {
    height: 65px;
    margin-bottom: 60px;
    /* IE 10 */
    background-image: -ms-linear-gradient(top, #81a8cb 0%, #1947D1 100%);

    /* Firefox */
    background-image: -moz-linear-gradient(top, #81a8cb, #1947D1); 

    /* Safari  & Chrome */
    background-image: -webkit-gradient(linear,left bottom,left top, color-stop(0, #1947D1),color-stop(1, #81a8cb)); 
    box-shadow: inset 0 0 15px black;
}

h1.name{
    font-family: Lato, 'Courier Bold', sanserif;
    font-weight: bold;
    font-variant: small-caps;
    font-size: 60px;
    margin-left: 30px;
    float:left;
    color: "#335CD6";
}

HTML:

<!DOCTYPE html>
<html>

<head>
<link rel = "stylesheet" href = "stylesheet.css" type = "text/css">
<link rel = "stylesheet" href = "formstylesheet.css" type = "text/css">
<meta http-equiv="X-UA-Compatible" content="IE=80" />
</head>

<div id = "screen">
<body>

<h1 class = "name"> Prog-Assist </h1>

<div id = "header">
    <div id = "gradient">

..................... more code
    </div>
</div> <!-- end header --> 

</div> <!-- end screen-->
</body>
</html>

Answer 1

只需删除

float:left;

现在在您的 Fiddle

中工作正常

Answer 2

http://jsfiddle.net/edqq8trg/3/

移除 H1 左侧的浮动。

h1.name{

    font-family: Lato, 'Courier Bold', sanserif;
    font-weight: bold;
    font-variant: small-caps;
    font-size: 60px;
    margin-left: 30px;

    color: "#335CD6";
    margin-top: 0;
}

将 <h1> Header 移动到导航栏上方

Move <h1> Header above navigation bar

html

css

position

header