Заголовок CSS и HTML теряется на веб-странице ⇐ CSS

[Anonymous]

В отличие от

Код: Выделить всё

Personal information

[/b], который прекрасно показывает, как я хочу, чтобы

Код: Выделить всё

Emergency contact

[/b] заголовок, который не помещается на странице.
CSS для

Код: Выделить всё

[/b] находится в папке CSS ниже:

Код: Выделить всё

PERSONAL INFORMATION


@*get firstname and last name to alighn with the other textboxes also make them fill the page*@

First Name
@Html.TextBoxFor(x => x.FirstName, new { @class = "form-control", id = "FirstName", placeholder = "Enter First Name" })

Last Name
@Html.TextBoxFor(x => x.LastName, new { @class = "form-control", id = "LastName", placeholder = "Enter Last Name" })


ID Number
@Html.TextBoxFor(x => x.ID_Number, new { @class = "form-control", id = "ID_Number", placeholder = "Enter ID Number" })

Date Of Birth
@Html.TextBoxFor(x => x.DateOfBirth, "{0:dd/MM/yyyy}", new { @class = "form-control datepicker", id = "DateOfBirth", placeholder = "DD/MM/YYYY" })




Gender
@Html.DropDownListFor(x => x.GenderIDFK, new List(), "Select Gender", new { @class = "form-control", id = "dllGetGender" })

Phone Number
@Html.TextBoxFor(x => x.PhoneNumber, new { @class = "form-control", id = "dllPhoneNumber", placeholder = "Enter Phone Number" })




Email
@Html.TextBoxFor(x => x.Email, new { @class = "form-control", id = "dllEmail", placeholder = "Enter Email" })

Address Line 1
@Html.TextBoxFor(x => x.Line1, new { @class = "form-control", id = "dllLine1", placeholder = "Enter Address Line 1" })




Address Line 2
@Html.TextBoxFor(x => x.Line2, new { @class = "form-control", id = "dllLine2", placeholder = "Enter Address Line 2" })

City
@Html.DropDownListFor(x => x.CityIDFK, new List(), "Select City", new { @class = "form-control", id = "dllGetCities"  })




Province
@Html.DropDownListFor(x => x.ProvinceIDFK, new List(), "Select Province", new { @class = "form-control", id = "dllGetProvinces" })

Country
@Html.DropDownListFor(x => x.CountryIDFK, new List(), "Select Country", new { @class = "form-control", id = "dllGetCountries" })








@*get h2 to give only they emergancy contact color *@
emergancy contact



Marital Status
@Html.DropDownListFor(x => x.MaritalStatusIDFK, new List(), "Select Marital Status", new { @class = "form-control", id = "dllGetMaritalStatus" })

Emergency Name
@Html.TextBoxFor(x => x.EmergencyName, new { @class = "form-control", id = "dllEmergencyName", placeholder
= "Enter Emergency Contact Name" })




Emergency Last Name
@Html.TextBoxFor(x => x.EmergencyLastName, new { @class = "form-control", id = "dllEmergencyLastName", placeholder = "Enter Emergency Contact Last Name" })

Emergency Phone Number
@Html.TextBoxFor(x => x.EmergencyPhoneNumber, new { @class = "form-control", id = "dllEmergencyPhoneNumber", placeholder = "Enter Emergency Contact Phone" })




Relationship
@Html.TextBoxFor(x => x.Relationship, new { @class = "form-control", id = "dllRelationship", placeholder = "Enter Relationship" })

Emergency Contact DOB
@Html.TextBoxFor(x => x.EmergancyDateOfBirth, "{0:dd/MM/yyyy}", new { @class = "form-control datepicker", id = "dllEmergancyDateOfBirth", placeholder = "DD/MM/YYYY"  })

Ниже приведен код CSS:

Код: Выделить всё

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}

.form-container {
width: 70%;
margin: 30px auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

header {
background-color: #00796b;
padding: 20px;
color: white;
text-align: center;
}

.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo img {
width: 100px;
}

.title h1 {
font-size: 24px;
color: #fff;
}

h2 {
background-color: #004d40;
color: white;
padding: 10px;
font-size: 18px;
}

form {
margin: 20px 0;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

input, select, textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}

input[type="radio"] {
width: auto;
margin-right: 10px;
}

textarea {
height: 100px;
}

footer {
margin-top: 30px;
text-align: center;
}

footer p {
font-weight: bold;
}

address {
font-style: normal;
}

.signature p {
font-size: 18px;
font-style: italic;
margin-top: 10px;
}

Это страница:



Подробнее здесь: https://stackoverflow.com/questions/791 ... on-webpage