Есть ли способ выровнять <p>в HTML5?

Question

body {
  font-family: Raleway, sans-serif;
}

h1 {
  width: 100%;
  font-weight: 300;
  text-align: center;
  font-size: 40px;
  color: #D6B47E;
}

h2 {
  display: inline-block;
  text-align: center;
  background-color: #D6B47E;
  padding: 3px 10px;
  margin: 5px;
  font-size: 1.75rem;
  color: white;
}

.menu {
  border: 2px solid;
  text-align: center;
  width: 200px;
}

h3 {
  display: inline-block;
  font-weight: 800;
  background-color: #ffffff;
  text-align: center;
  padding: 10px 25px;
}

.container {
  min-width: 775px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.hero {
  background-size: cover;
  min-width: 964px;
  min-height: 422px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: url("https://s3.amazonaws.com/codecademy- 
 content/projects/make-a-website/lesson-2/cafe.jpg");

}

.container a {
  color: black;
  text-decoration: none;
}

.supporting-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 45px 0 0 0;
}

.supporting-container div {
  background-size: cover;
  min-width: 450px;
  min-height: 345px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 30px;
}

.upcoming {
  background-image: url("https://s3.amazonaws.com/codecademy- 
 content/projects/make-a-website/lesson-2/events.jpg");

}

.roast {
  background-image: url("https://s3.amazonaws.com/codecademy- 
 content/projects/make-a-website/lesson-2/roast.jpg");

}

#footer {
  color: #D6B47E;
  width: 300px;
  font-weight: 300;
  font-size: 1.5rem;
  border: 1px solid #D6B47E;
  border-radius: 10px;
  display: block;
  margin-right: 0;
}

#footer:active {
  position: relative;
  top: 2px;
}

#footer:hover {
  background-color: #D6B47E;
  color: white;
}

ul {
  list-style-type: none;
  padding: 0px;
  margin-left: 525px;
}

ul li {
  font-size: 1rem;
  display: inline;
  text-align: justify;
  margin-left: 50px;
}

<link href='https://fonts.googleapis.com/css?family=Raleway:300,800' rel='stylesheet' type='text/css'>

<div class="container" id="top">
  <h1>Cupful Cafe</h1>
  <div class="hero">
    <div class="hero-content">
      <div>
        <h2>Organic Tea and Coffee</h2>
      </div>
      <div>
        <h2>Freshly Baked Pastries</h2>
      </div>

      <h2>Free Wifi</h2>

      <div>
        <h3><a href="Menu.html">Read Our Menu </a></h3>
      </div>
    </div>
  </div>
</div>

<div class="supporting-container">
  <div class="upcoming">
    <h3>Upcoming events</h3>
  </div>
  <div class="roast">
    <h3>Today's Roast</h3>
  </div>
</div>
<div>
  <ul>
    <li>About</li>
    <li>Social Networks</li>
    <li>Privacy Policy</li>
  </ul>

  <p id="footer">Contact Us</p>
</div>

<a href="#top">back to top</a>

Итак, я пытаюсь переместить кнопку «Свяжитесь с нами», чтобы она находилась в правой части страницы рядом со списком.и по какой-то причине я не могу.Когда я попытался использовать Flow, он перешел на правую сторону, но он был под списком, а не рядом с ним.

Еще один вопрос, который я хотел бы задать: есть ли способ выровнять список иСвяжитесь с нами прямо под картинкой?фотографии заданы как фоновые рисунки, поэтому я не уверен, как это сделать.и когда я пытаюсь использовать margin-left / right или%, он работает на полном экране, но когда я изменяю размер страницы, он запутывается.

Answer 1

body {
  font-family: Raleway, sans-serif;
}

h1 {
  width: 100%;
  font-weight: 300;
  text-align: center;
  font-size: 40px;
  color: #D6B47E;
}

h2 {
  display: inline-block;
  text-align: center;
  background-color: #D6B47E;
  padding: 3px 10px;
  margin: 5px;
  font-size: 1.75rem;
  color: white;
}

.menu {
  border: 2px solid;
  text-align: center;
  width: 200px;
}

h3 {
  display: inline-block;
  font-weight: 800;
  background-color: #ffffff;
  text-align: center;
  padding: 10px 25px;
}

.container {
  min-width: 775px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.hero {
  background-size: cover;
  min-width: 964px;
  min-height: 422px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: url("https://s3.amazonaws.com/codecademy- 
 content/projects/make-a-website/lesson-2/cafe.jpg");

}

.container a {
  color: black;
  text-decoration: none;
}

.supporting-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 45px 0 0 0;
}

.supporting-container div {
  background-size: cover;
  min-width: 450px;
  min-height: 345px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 30px;
}

.upcoming {
  background-image: url("https://s3.amazonaws.com/codecademy- 
 content/projects/make-a-website/lesson-2/events.jpg");

}

.roast {
  background-image: url("https://s3.amazonaws.com/codecademy- 
 content/projects/make-a-website/lesson-2/roast.jpg");

}

#footer {
  color: #D6B47E;
  width: 300px;
  font-weight: 300;
  font-size: 1.5rem;
  border: 1px solid #D6B47E;
  border-radius: 10px;
  display: block;
  margin-right: 0;
}

#footer:active {
  position: relative;
  top: 2px;
}

#footer:hover {
  background-color: #D6B47E;
  color: white;
}

ul {
  list-style-type: none;
  padding: 0px;
}
.listing {
  display:flex;
}
ul li {
  font-size: 1rem;
  display: inline;
  text-align: justify;
  margin-left: 50px;
}

<link href='https://fonts.googleapis.com/css?family=Raleway:300,800' rel='stylesheet' type='text/css'>

<div class="container" id="top">
  <h1>Cupful Cafe</h1>
  <div class="hero">
    <div class="hero-content">
      <div>
        <h2>Organic Tea and Coffee</h2>
      </div>
      <div>
        <h2>Freshly Baked Pastries</h2>
      </div>

      <h2>Free Wifi</h2>

      <div>
        <h3><a href="Menu.html">Read Our Menu </a></h3>
      </div>
    </div>
  </div>
</div>

<div class="supporting-container">
  <div class="upcoming">
    <h3>Upcoming events</h3>
  </div>
  <div class="roast">
    <h3>Today's Roast</h3>
  </div>
</div>
<div style="display:flex;">
  <ul>
    <li>About</li>
    <li>Social Networks</li>
    <li>Privacy Policy</li>
  </ul>

  <p id="footer" style="margin-left: auto;">Contact Us</p>
</div>

<a href="#top">back to top</a>

Надеюсь, вам это нужно, вам просто нужно настроить дисплей на flex для ul, а для P и parent-left: auto to P, если нужно что-то ещепожалуйста, дайте мне знать

Answer 2

Если вы хотите, чтобы два элемента были справа и слева, поместите их в тег Div, а затем используйте свойство float , чтобы выровнять их по левому или правому краям.

Читать подробности: https://www.w3schools.com/csSref/pr_class_float.asp