Мой второй div растягивается далеко, когда я настраиваю порядок. Кто-нибудь, кто понимает, что вызывает это? Я думаю, что это связано с моей сеткой, не уверен. И может быть, я использую% в качестве ширины. Во всяком случае, я думаю, вы можете увидеть, где я пытаюсь получить с этим. Я хочу, чтобы второе с надписью «свяжитесь с нами через» было справа, а все остальное - слева.
<style>
body {
font-family: 'Oswald', sans-serif;
}
input {
border-radius: 25px;
margin-top: 7%;
padding: 6px 30px 6px 10%;
border: 2px solid black;
}
textarea {
border: 2px solid black;
color: solid black;
}
#contactHeader {
text-align: center;
margin-bottom: 2%;
font-size: 50px;
}
.contact {
margin: 0 auto;
margin-top: 5%;
justify-content: center;
background-color: #00B4E8;
padding: 2%;
max-width: 70%;
border-radius: 20px;
margin-bottom: 5%;
border: 2px solid black;
}
.contactInfo {
display: grid;
grid-template-columns: auto auto;
color: solid black;
margin: 0 auto;
margin-top: 5%;
margin-left: 15%;
margin-right: 15%;
}
.contactTxt1 {
display: flex;
flex-direction: column;
}
.contactTxt2 {
border: 3px solid black;
min-width: 70%;
padding: 2%;
margin-left: 10%;
background-color: white;
border-radius: 15px;
font-size: 12px;
margin-right: 100%;
}
.RadioButtons {
display: flex;
flex-direction: row;
margin: 15px 0 10px 15px;
font-weight: 600;
}
.member {
margin-left: 10px;
margin-right: 25px;
margin-top: 7px;
}
.contactTxt2Header {
margin-top: 10px;
}
.contactStuff {
font-size: 15px;
}
.ContactBox {
background-color: solid black;
}
.SubmitButton {
display: flex;
flex-direction: column;
}
.submit {
background-color: green;
border: 2px solid white;
color: white;
border-radius: 25px;
width: 75%;
padding: 6px 12px;
margin: 0 auto;
font-size: 20px;
text-align: center;
}
::placeholder {
color: black;
}
@media only screen and (max-width: 600px) {
.top1 {
margin-bottom: 2%;
}
.search {
margin-right: 10%;
}
.SearchBar {
height: 20px;
}
.contact {
max-width: 97%;
width: 97%;
}
.contactInfo {
margin-left: 5%;
margin-right: 5%;
display: flex;
flex-direction: column;
margin-right: 15%;
}
.ContactBox {
width: 90%;
}
.contactTxt2 {
border: 2px solid black;
padding: 2%;
margin-left: 10%;
background-color: white;
border-radius: 15px;
font-size: 12px;
width: auto;
margin: 0 auto;
margin-top: 2%;
}
.contactHeader {
font-size: 18px;
}
}
</style>
<html>
<div class="navigations">
<div class="buttonNav">
<a href="index.html"><button class="siteButton" type="onclick"
name="button">Home</button></a>
</div>
<div class="buttonNav">
<a href="about.html"><button class="siteButton" type="onclick"
name="button">About</button></a>
</div>
<div class="buttonNav">
<a href="contact.html"> <button class="siteButton" type="onclick"
name="button">Contact</button></a>
</div>
<div class="buttonNav">
<a href="exhibition.html"><button class="siteButton" type="onclick"
name="button">Exhibition</button></a>
</div>
<div class="buttonNav">
<a href="learn.html"><button class="siteButton" type="onclick"
name="button">Learn</button></a>
</div>
<div class="buttonNav">
<a href="shop.html"><button class="siteButton" type="onclick"
name="button">Shop</button></a>
</div>
</div>
<div class="contact">
<h1 id="contactHeader">Contact</h1>
<div class="contactInfo">
<form action="youHaveAnswered.php" method="post">
<div class="contactTxt1">
<input class="ContactBox" type="text" name="fname" placeholder="First and
Middle Name"></input>
<input class="ContactBox" type="text" name="lname" placeholder="Last Name">
</input>
<input class="ContactBox" type="email" name="email" placeholder="Email
Adress"></input>
<div class="RadioButtons">
Member:<input class="member" type="radio" name="member" value="member">
Non-Member:<input class="member" type="radio" name="non-member" value="non-
member">
</div>
<div class="text">
<textarea name="name" rows="20" cols="40" placeholder="Tell us what you're
wondering about"></textarea>
</div>
<div class="SubmitButton">
<button class="submit" type="submit" name="button">Send</button>
</div>
</div>
</form>
<div class="contactTxt2">
<h1 class="contactHeader">You could also contact us through</h1>
<h2 class="contactTxt2Header">Phone Number</h2>
<span class="contactStuff">1-603-413-4124</span>
<h2 class="contactTxt2Header">Email</h2>
<span class="contactStuff">SweeneyTodd@FleetStreet.com</span>
<h2 class="contactTxt2Header">Address</h2>
<span class="contactStuff">221b Baker St, London, Britain</span>
<h2 class="contactTxt2Header">We can recieve calls from</h2>
<span class="contactStuff">07:00AM - 04:00PM</span>
</div>
</div>
</div>
</html>