Итак, я создал несколько HTML и CSS для целевой страницы моего веб-приложения, которое я разрабатываю. Обычно я создаю свой дизайн на scratchpad.io, прежде чем внедрять его в STS (IDE, которую я использую). Теперь, когда я запускаю свое приложение, вывод страницы выглядит иначе, чем то, что на самом деле спроектировал HTML i (и если я открою этот HTML из моего локального каталога), он будет выглядеть так же, как я его создал.
Я связал свой CSS внешний файл в своем приложении, как и остальные мои страницы (которые работают).
Кто-нибудь знает, почему это так? Я загружу два разных вывода (хотя это один и тот же код)
Как они должны выглядеть: https://imgur.com/7km5BKY
Тот же код, но в приложении выглядит так: https://imgur.com/iw0N3lj
Спасибо!
HTML Код:
<!DOCTYPE html>
<html>
<head>
<title>Landing</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link type="text/css" rel="stylesheet" href="../styles/landingStyle.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
</head>
<body>
<div class="flex-center position-ref full-height">
<div class="top-right links">
<a href="/account/login">Login</a> <a href="/account/signup">Register</a>
</div>
<div class="content">
<img src="../styles/ysplanding.jpg" class="brand_logo" style="width:100%;">
<div class="title m-b-md">
<div class="nowrap">
Yorkshire Sculpture Park<br> Employee Portal
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body, html {
margin: 0 auto;
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100%;
position: fixed;
}
.img {
border-radius: 50%;
position: absolute;
width: 100%;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
center: 50px;
top: 20px;
}
.content {
text-align: center;
position: absolute;
opacity: 0.9;
positon: relative;
padding-top: 2px;
height: 500px;
width: 100%;
max-width: 100%;
word-break: break-word;
}
.title {
font-size: 90px;
position: fixed !important;
}
.m-b-md {
text-shadow: 2px 2px #636b6f;
font-weight: 300;
text-align: center;
position: absolute;
text-align: center;
margin-bottom: 4;
top: 40%;
bottom: 2%;
right: 5px;
left: 600px;
position: absolute;
transform: translate(-50%,-50%);
color: white;
width: 100%;
max-width: 100%;
word-break: break-word;
}
.links>a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 800;
letter-spacing: .2rem;
text-decoration: none;
text-transform: uppercase;
}
.nowrap {
white-space: nowrap;
}