HTML,CSS:formタグ内のCSSが反映されなくなりました。多少javaも解られる方ご教示宜しくお願い致します。

コード

javaにてSmamaというコミュニティサイトを作成中ですが、バックエンドはjavaにて実装予定、Eclipseにて
作成しています。ログイン画面を作成中ですが、formタグでメールアドレスとパスワード入力画面を作成していて
メールアドレスとパスワードをそれぞれformタグにて囲って作成していましたが、２つともまとめて（ログインボタンも含め）
formタグで囲うのが正しいと知り、そのように書き換えてみましたが、formタグ内のソースにCSSが効かなくなってしまいました。

### 発生している問題・エラーメッセージ
メールアドレス・パスワードの入力画面が表示されない。
ログインボタンも表示されない。


### 該当のソースコード
【HTML】
<form action="/Smama/Login" method="post">
        <input class="mail-address" id="mail-address" type="email" name="address-txt" placeholder="メールアドレス"/><br>
        <input class="password" id="password" type="password" name="password-txt" placeholder="パスワード"/><br>
        <input class="btn-green" type="submit" value="ログイン"><br>
    </form> 

【CSS】
.mail-address,.password {
    width: 50%;
    height: 30px;
    color: #333300;
    margin: 30px 400px;
}
.btn-green {
    height: 40px;
    width: 200px;
    padding-top: 15px;
    margin: 30px auto;
    background-color: #00CC99;
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10px;
    text-align: center;
}
.btn-green:hover {
    background-color: #009999;
}

以下追記です。【login.Input.jsp(html)】
```html

コード
```<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="model.SmamaLogin" %>
<%@ page import="model.LoginLogic" %>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Smama1</title>
<link rel="stylesheet" href="Smama.css">
</head>
<body>
<header>
    <div class="header-area">
        <div class="main-logo">
            <p class="main-txt">シングルマザーのコミュニティサイト</p>
            <h1 class="main-img">Smama</h1>
        </div>
    </div>
</header>
<div class="login-screen">
    <h1 class="login">ログイン</h1>
    <form action="/Smama/Login" method="post">
        <input class="mail-address" id="mail-address" type="email" name="address-txt" placeholder="メールアドレス"/><br>
        <input class="password" id="password" type="password" name="password-txt" placeholder="パスワード"/><br>
        <input class="btn-green" type="submit" value="ログイン"><br>
    </form>    
    <p class="or">または</p>
    <a href="member.jsp" class="btn-orange">新規会員登録</a>
</div>
<footer class="site-overview">
    <div class="text-end">
        <a href="#" class="contact-us">お問い合わせ</a>
        <a href="#" class="recruit">求人・採用のお問い合わせ</a>
        <a href="#" class="service">利用規約</a>
        <a href="#" class="company">運営会社</a>
    </div>
    <p class="end">copyright(c)SMS Co.LTD All Rights Reserved</p>
</footer>
</body>
</html>




【CSS追記（関係ないと思われる部分は省略しています）】
```css
コード
```@charset "UTF-8";
.main-logo,.main-txt,a,img,.nav,h3,.terms,.site-overview {
    display: block;
}
.btn-recruiting,.btn-login,.submit-btn,.banner,.sprout,.chicken,.cabbage,.microwave,.main-container {
    display: inline-block;
}
* {
    margin: 0;
    padding: 0;
}
/*CSS:ログインページ*/

.login-screen {
    height: 500px;
    width: 100%;
    background-color: #CCFFFF;
}
.login {
    font-size: 30px;
    color: #333300;
    text-align: center;
    padding-top: 40px;
}
.mail-address,.password {
    width: 50%;
    height: 30px;
    color: #333300;
    margin: 30px 400px;
}
.btn-orange {
    height: 40px;
    width: 200px;
    padding-top: 15px;
    margin: 30px auto;
    background-color: #FF6633;
    color: white; 
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10px;
    text-align: center;
}
.btn-orange:hover {
    background-color: #FF6600;
}
.or {
    text-align: center;
}
.btn-green {
    height: 40px;
    width: 200px;
    padding-top: 15px;
    margin: 30px auto;
    background-color: #00CC99;
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10px;
    text-align: center;
}
.btn-green:hover {
    background-color: #009999;
}

　　

![cssが適用されていないログイン画面](1f3733a141c9c65ef0bc9729b0821eb2.png)
![cssが適用されているログイン画面](d2e462a84a123da7756c06bf4faee934.png)


### 試したこと

メールアドレス、パスワードそれぞれ単体でformタグで囲うと、CSSが適用され入力画面が表示されます。
しかし、それでは画面遷移や入力データの保存が出来ないと言われました。


### 補足情報（FW/ツールのバージョンなど）

Eclipse2017、java,HTML,CSS
当方、40代（女）の初学者でIT用語にも疎いため、お手柔らかにお願い致します。

miyabi_pudding

2020/07/29 10:48

バックエンドがJavaのようですが、何かフレームワークは使っていますか？また、HTML構文はこれで全てでしょうか？そうで無い場合、ブラウザで表示時の（ようはバックエンドの状態でなく、ブラウザへ返された最終のHTML）を記載してください。 CSSも、他に書いた部分が影響してるかもなので、なるたけ全て記載してください。

WOAAbQm0Jefa5g1

2020/07/29 11:13

フレームワークは使用していません。構文の方を追記しておきます。

miyabi_pudding

2020/07/29 11:37

なるほど・・・。すみません、ソースコードは、コードブロックを使用していただけませんか？ ```ここに言語名ソースコード ``` という形式で入力すれば、コードブロックになります。

WOAAbQm0Jefa5g1

2020/07/29 11:56

了解です。わかりました。

Yasumichi

2020/07/29 12:28

ソースをコピペして、ローカルで試してみましたが、スタイルが適用されています。当方、ローカルの Apache Tomcat 9.0.35 サーバー、ブラウザーは Firefox で試しました。 Web アプリケーションサーバーと確認したブラウザーを教えてください。因みにサーバーで実行で確認しているという認識でよろしいでしょうか？

WOAAbQm0Jefa5g1

2020/07/29 12:42

サーバーはApache Tomcat　9.0.35、ブラウザはGoogle Chromeです。サーバーで実行しています。

Yasumichi

2020/07/29 12:49

Google Chrome でも反映されているように見受けられます。省略した部分に原因があるかもしれません。あと、反映されるバージョンと反映されないバージョンのスクリーンショットを貼っていただき、反映されないと判断した理由を付記していただけると解決の糸口が見えるかもしれません。

m.ts10806

2020/07/29 20:49

質問内のマークダウンがめちゃくちゃです。投稿前にプレビュー確認してください。

WOAAbQm0Jefa5g1

2020/07/29 23:27

スクリーンショットを後程、投稿させていただきます。

Yasumichi

2020/07/30 13:17

WOAAbQm0Jefa5g1 さんへ m.ts10806 さんが > 質問内のマークダウンがめちゃくちゃです。と指摘されている通り、login.Input.jsp の冒頭部分が消えていたり、ところどころ、css が化けてたりするので当方で完全に再現できているか、不明な部分があります。 jsp の場合、 ```jsp この間にソースを書く。ソースと関係ない説明は、外に書きます。 ``` css の場合、 ```css この間にソースを書く。ソースと関係ない説明は、外に書きます。 ``` という感じに書きます。エディタの <code> ボタンを使った場合、「ここに言語を入力」と書かれた部分には、「html」や「jsp」、「css」などの言語名で置き換えます。その部分をソースコードにしたりすると現在のように崩れるので注意が必要です。

Yasumichi

2020/07/30 14:27

原因らしき部分が再現できたので回答に書きました。私の推測が正しければ、WOAAbQm0Jefa5g1 さんが「関係ないと思われる部分」と思った部分が関係していたことになります。なので自己解決が難しい場合は、関係あるか否かを自己判断せず、すべて開示された方が、解決が早いと思われます。あと、今回、スクリーンショットを追加して頂いたことで原因がピンと来たというところもあります。単純に「CSSが反映されない」と言葉だけで書くと回答者と共通認識を持てない可能性が高いです。（実際には、CSS が反映されていたからこそ、期待した表示にならなかった訳ですし。）以上、「お手柔らかに」とは書かれていましたが、今後のために敢えて書かせていただきました。

行動規範の内容に同意します

回答2件

ベストアンサー

本来、質問への追記・修正依頼で書くべき内容かもしれませんが。

開示されている範囲で当方で確認した画面です。

おそらく、

（関係ないと思われる部分は省略しています）

の部分が悪影響を及ぼしている可能性が高い気がします。

可能性として考えられるのは、form あたりに display: flex; を指定しているとかですかね。

【追記】

css
1form {
2    display: flex;
3}

を追加したら、同様の崩れが再現できました。

なので同様であれば、display: flex; を削除してください。

投稿2020/07/30 13:59

編集2020/07/30 14:32

Yasumichi

総合スコア1773

WOAAbQm0Jefa5g1

2020/08/02 07:13

返信の方遅くなり申し訳ありません。わざわざご丁寧に説明の方有難うございました。同様にやってみたら無事解決できました。ボタンの方がずれてしまいますがおそらくソースを見直せば解決すると思います。どうも有難うございました！

行動規範の内容に同意します

CodePenで確認した限りでは、form内の要素にはスタイルは当たっていますね。

CodePenサンプル

jspということですが、chromeのデベロッパーツールでform内の要素が表示されていることは確認されておりますでしょうか。
もしかしたら、デベロッパーツールのコンソールログにエラーが表示されているかもしれませんのでご確認いただけますでしょうか。
https://saruwakakun.com/html-css/basic/chrome-dev-tool

投稿2020/07/29 12:14