Your question is a bit confusing. So please elaborate if I am mistaken. You are trying to position the article to the right, along side the two sections. The article aligns below the other two elements at the bottom.

If this is the case you can use three methods: Float, Flexbox or Grid. Rather than positioning tag.

For your scope float seems easiest to implement and will save you time. Grid area gives you a lot more control, but can be a mental gymnastic at first. Flexbox would be better if there was no specific order of things. Let me know if you end up using any of the other methods and still need help, or if you have any problems.

CSS / Float

// Floats section to the left.
.why, .benefits {
 display: block;
 float: left;
 width: 23%;
 margin: 2%;
 padding: 5%;
 background-color: rgb(0, 0, 0, 0.5);
 color: white;
}

// Will make article align to the right of current parent container (body tag, if no wrapper used) 
article {
 display: block;
 float: right;
 width: 70%;
 height: 58vh;
 background-color: rgb(0, 0, 0, 0.5);
}

// Add to any element below that doesn't float.
.clear-fix-both {
 clear: both;
}

HTML

<section class="Locations clear-fix-both">
...

**The “display: inline-block;” gives control for height and width. Just remember that the total width is always maximum 100% else the last section will move to the next row. Box-sizing excludes padding from total width and height so it’s easy to calculate the total width of elements.
**
If any questions about the code above feel free to ask.
Good luck!

body{
  margin: 0;
}

.why{
  margin: 2%; 
  padding: 1%; 
  background-color: rgb(0, 0, 0, 0.5); 
  color: white; 
  display: inline-block;
  width: 33%;
  height: 30vh;
}

.benefits{
  display: inline-block;
  margin: 2% 0; 
  padding: 1%;
  width: 40%; 
  height: 30vh;
  background-color: rgb(0, 0, 0, 0.5); 
  color: white;
}
.Locations{
  position: relative;
  left: 37%;
  display: block; 
  margin: 0 2%; 
  padding: 1%;
  width: 40%; 
  height: 30vh;
  background-color: rgb(0, 0, 0, 0.5); 
  color: white; 
} 
 
.bike{ 
  height: 40%; 
  width: 20%;
}

.hammock{
   height: 50%;
   width: 20%;
   float: left;
   padding: 1%;
}

.fairground{
   height: 50%;
   width: 20%;
   float: right;
   padding: 1%;
}

/*
===========
Article
===========
*/
article{
   display: inline-block;
   margin: 2%;
   margin-right: 0;
   padding: 1%;
   background-color: rgb(0, 0, 0, 0.5);
   height: 30vh;
 }

.why, .benefits, .Locations{
  box-sizing: border-box;
}

I am doing a uni project of having to build my own website.

I am trying to get my article section on the right hand side against my two sections tags. However I can not get the article to move up beside them. Even when I use position in css. I can move it to the right but not up and down.

When I use position relative it moves my sections down. Please help?

/*
       ==========
       Section
       ==========
       */

.why {
  margin: 2%;
  padding: 5%;
  background-color: rgb(0, 0, 0, 0.5);
  color: white;
}

.benefits,
.Locations {
  margin: 2%;
  padding: 5%;
  width: 40%;
  background-color: rgb(0, 0, 0, 0.5);
  color: white;
}

.bike {
  height: 40%;
  width: 20%;
  padding: 1%;
}

.hammock {
  height: 50%;
  width: 20%;
  float: left;
  padding: 1%;
}

.fairground {
  height: 40%;
  width: 20%;
  float: right;
  padding: 1%;
}


/*
       ===========
       Article
       ===========
       */

article {
  position: relative;
  left: 70%;
  top: 200%;
  background-color: rgb(0, 0, 0, 0.5);
  width: 15vh;
  height: 58vh;
}

<section class="why">
  <h2>Why choose a staycation</h2>
  <p><img class="bike" src="images/Bike.jpg" alt="Bike in a forest">A staycation, or holistay, is a period in which an individual or family stays home and participates in leisure activities within driving distance of their home and does not require overnight
    accommodations. Alternatively, and commonly in UK usage, it is a holiday spent in one's home country rather than abroad. </p>

</section>

<section class="benefits">
  <h2>What are the benefits of a staycation</h2>
  <p><img class="hammock" src="images/Hammock.jpg" alt="hammock view">A staycation, or holistay, is a period in which an individual or family stays home and participates in leisure activities within driving distance of their home and does not require overnight
    accommodations. Alternatively, and commonly in UK usage, it is a holiday spent in one's home country rather than abroad. </p>

</section>

<article>
  <h2>places to visit</h2>
  <ul>
    <li><a href="https://www.butlins.com">Butlins</a></li>
    <li><a href="https://www.blackpoolpleasureneach.com">
                          Blackpool</a></li>
    <li><a href="https://www.altontowers.com">Alton Towers</a></li>
    <li><a href="https://www.flamingoland.co.uk">
                          Flamingo Land</a></li>
  </ul>
</article>

<section class="Locations">
  <h2>Where can you visit?</h2>
  <p><img class="fairground" src="images/Fairground.jpg" alt="Fairground">A staycation, or holistay, is a period in which an individual or family stays home and participates in leisure activities within driving distance of their home and does not require
    overnight accommodations. Alternatively, and commonly in UK usage, it is a holiday spent in one's home country rather than abroad.</p>

</section>