Is There a Way to Align <p> in 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>

So, the thing is, I'm trying to move the contact us button to be in the right side of the page next to the list. and for some reason I cant. When i tryed to use Flow it went to the right side but it was under the list and not in next to it.

Another Question i would like to ask is: Is there a way to align the list and the Contact Us just below the picture? the pictures are set as backgrount imgaes so im not sure how to do that. and when i try to use margin-left/right or %, it does work on full screen but when i change the size of the the page it gets messed up.

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>

I hope you need this, You just need to give the display flex to ul and P's parent and margin-left: auto to P, if need anything else, please let me know

Answer 2

If you want to have two element in right and left side , you should put them on the two Div tag then use float property for align them to the left or right.

Read details: https://www.w3schools.com/csSref/pr_class_float.asp