求助大佬，设置外联css之后发现div样式只有header能用，后面的article是直接完全没有效果，把样式复制回原jsp文件之后能用，但是在外部就是不能用，求解
css代码
@charset "UTF-8";
#header
{
background-color:#222266;
color:#FFFFFF;
padding:2px;
margin:0px;
}
#article
{
background-color:#FFFFFF;
width:350px;
float:left;
padding:10px;
}
body
{
margin:0px;
text-align:center;
background: url(../images/IndexBackground.jpg) no-repeat center center;
background-attachment:fixed;
background-size:cover;
}
a{text-decoration:none}
jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>博客首页</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="header">
<div style="text-align:left;">
<img alt="标题" src="images/title.png" width="200">
<p style="float:right;">
<a href="about.jsp"style="color:#FFFFFF">技术支持</a>
<a href="about.jsp"style="color:#FFFFFF">登录</a>
<a href="about.jsp"style="color:#FFFFFF">注册</a>
</p>
</div>
</div>
<p style="color:#FFFFFF">欢迎访问个人博客+α</p>
<div id="article">
<p>愚夫愚妻，愚不可及！愚不可及，愚不可及！</p>
<p>愚兄愚弟，愚不可及！愚不可及，愚不可及！</p>
<p>愚弟愚妹，愚不可及！愚不可及，愚不可及！</p>
<p>愚子愚妻，愚不可及！愚不可及，愚不可及！</p>
</div>
<div id="article">
<p>吹一气，吹一气，吹一气……</p>
</div>
<img alt="小兔崽子" src="images/Obake.jpg">
</body>
</html>
然后效果是这样的，下面的article完全没有划分，上面的header一切正常
