Need help floating an element with CSS

I’m trying to design this webpage for this class I’m taking but having some trouble. I’ve only ever posted code to this site, but I’m going to try and include screenshots this time so if it doesn’t post the pictures I apologize it’s my first time.

So, essentially what I had to do was make a wireframe and then code it. I’m trying to float an aside element next to another element. I’m pretty new to HTML so what I tried to do was wrap the aside element in a section element and then float the aside element so that they would be in the same parent container, but even when I did that it would float the aside below where I want it.

Is there anyway to get the aside element to float like it is in [1]?
Not how I have it in [2].

Here’s what I have so far:

<!Doctype html>
<html>
    <header>
        <title>Homepage</title>
        <h1>Pennsylvania</h1>
        <style>
* {box-sizing: border-box}
body {font-family: sans-serif}
.mySlides {display: none}
img {vertical-align: middle;}

h1 {
    text-align: center;
    font-weight: bold;
    font-size: 100px;
    text-decoration: dashed;
    text-shadow: white;
    background-color: black;
    color: #ffffff;
    padding: 0px;
}

.links {
    text-align: center;
    border: -50px;
}

nav a{
    padding: 20px;
    width: 100%;
    justify-content: space-between;
}

.background_info {
    width: 60%;
    border: solid 5px black
    margin: 10px;
    padding: 50px;
    text-align: left;
}

.background_info h2 {
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
}

section .background_info{
  width: 60%;
  background-color: green;
}

.quick_facts {
    width: 40%;
    float: right;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  padding: 30px 0px 0px 0px;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  background-color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: white;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 20%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
</style>
    </header>
    <body>
        <nav class="links">
            <a href="./harrisburg.html">Harrisburg</a>
            <a href="./pittsburgh.html">Pittsburgh</a>
            <a href="./philadelphia.html">Philadelphia</a>
        </nav>
      <section>
            <div class="slideshow-container">

                <!-- Full-width images with number and caption text -->
                <div class="mySlides fade">
                  <img src="https://travel2next.com/wp-content/uploads/pennsylvania-map.jpg" alt="Map image of Pennsylvania" name="Pennsylvania_image" style="width:100%">
                </div>
              
                <div class="mySlides fade">
                  <img src="https://www.redfin.com/blog/wp-content/uploads/2023/12/GettyImages-172989468.webp" alt="Pennsylvania landscape" name="Pennsylvania_landscape" style="width:100%">
                </div>
              
                <div class="mySlides fade">
                  <img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Pennsylvania.svg" alt="Pennsylvania flag" name="Pennsylvania_flag" style="width:100%">
                </div>
              
                <!-- Next and previous buttons -->
                <a class="prev" onclick="plusSlides(-1)">❮</a>
                <a class="next" onclick="plusSlides(1)">❯</a>
              </div>
              
              <!-- The dots/circles -->
              <div style="text-align:center">
                <span class="dot" onclick="currentSlide(1)"></span>
                <span class="dot" onclick="currentSlide(2)"></span>
                <span class="dot" onclick="currentSlide(3)"></span>
              </div>
            <div class="background_info">
                <h2>About</h2>
                <p>Pennsylvania was one of the United State's original 13 colonies, founded in 1681.
                The state was named after William Penn, an influential quaker at the time of their settlement in America.
                The capitol of pennsylvania is Harrisburg. With an area of just over 46,000 square miles,
                Pennsylvania boasts a great multitude of animals, foliage, and waterways. The state animal of Pennsylvania
                is a white tail deer, the state tree is an eastern hemlock, and the state flower is a mountain laurel. Pennsylvania
                is home to a number of nationally recognized schools such as Penn State University and the University of Pennsylvania.</p>
            </div>
        </section>
            <aside>
                <div class="quick_facts">
                    <h3>Did you know?</h3>
                    <p>Pennsylvania's nickname as "The keystone state" is because it connects the Northeastern and 
                    Southern United States, and the Atlantic seaboard and Midwest</p>
                </div>
            </aside>

    <script>
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>
    </body>
</html>


  [1]: https://i.sstatic.net/md7ePRYD.png
  [2]: https://i.sstatic.net/AJwIXpx8.png

6

It appears you are after something like this:

<html>
    <style>
        .background_info {
            width: 100%;
            background-color: green;
            padding: 50px;  /* padding inside the green box */
            box-sizing: border-box;
        }

        .quick_facts {
            width: 40%;  /* relative width of the white box */
            background-color: white;
            padding: 10px;
            float: right;  /* floats to the right, allowing text to wrap */
            margin: 0 0 20px 20px;  /* margin between text and the white box */
        }
    </style>
    <body>
        <section>
            <div class="background_info">
                <aside>
                    <div class="quick_facts">
                        <h3>Did you know?</h3>
                        <p>Pennsylvania's nickname as "The keystone state" is because it connects the Northeastern and 
                            Southern United States, and the Atlantic seaboard and Midwest.</p>
                    </div>
                </aside>
                <h2>About</h2>
                <p>Pennsylvania was one of the United State's original 13 colonies, founded in 1681.
                The state was named after William Penn, an influential quaker at the time of their settlement in America.
                The capitol of pennsylvania is Harrisburg. With an area of just over 46,000 square miles,
                Pennsylvania boasts a great multitude of animals, foliage, and waterways. The state animal of Pennsylvania
                is a white tail deer, the state tree is an eastern hemlock, and the state flower is a mountain laurel. Pennsylvania
                is home to a number of nationally recognized schools such as Penn State University and the University of Pennsylvania.</p>
                <p>Another interesting fact is that Pennsylvania is one of the most historically significant states in the U.S.,
                home to the Liberty Bell and Independence Hall.</p>
            </div>
        </section>
    </body>
</html>

Which looks like this (depending on browser width):

Note that the order matters, you want the aside div before the rest of the content, so that it’s rendered at the top.

Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa Dịch vụ tổ chức sự kiện 5 sao Thông tin về chúng tôi Dịch vụ sinh nhật bé trai Dịch vụ sinh nhật bé gái Sự kiện trọn gói Các tiết mục giải trí Dịch vụ bổ trợ Tiệc cưới sang trọng Dịch vụ khai trương Tư vấn tổ chức sự kiện Hình ảnh sự kiện Cập nhật tin tức Liên hệ ngay Thuê chú hề chuyên nghiệp Tiệc tất niên cho công ty Trang trí tiệc cuối năm Tiệc tất niên độc đáo Sinh nhật bé Hải Đăng Sinh nhật đáng yêu bé Khánh Vân Sinh nhật sang trọng Bích Ngân Tiệc sinh nhật bé Thanh Trang Dịch vụ ông già Noel Xiếc thú vui nhộn Biểu diễn xiếc quay đĩa Dịch vụ tổ chức tiệc uy tín Khám phá dịch vụ của chúng tôi Tiệc sinh nhật cho bé trai Trang trí tiệc cho bé gái Gói sự kiện chuyên nghiệp Chương trình giải trí hấp dẫn Dịch vụ hỗ trợ sự kiện Trang trí tiệc cưới đẹp Khởi đầu thành công với khai trương Chuyên gia tư vấn sự kiện Xem ảnh các sự kiện đẹp Tin mới về sự kiện Kết nối với đội ngũ chuyên gia Chú hề vui nhộn cho tiệc sinh nhật Ý tưởng tiệc cuối năm Tất niên độc đáo Trang trí tiệc hiện đại Tổ chức sinh nhật cho Hải Đăng Sinh nhật độc quyền Khánh Vân Phong cách tiệc Bích Ngân Trang trí tiệc bé Thanh Trang Thuê dịch vụ ông già Noel chuyên nghiệp Xem xiếc khỉ đặc sắc Xiếc quay đĩa thú vị
Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa
Thiết kế website Thiết kế website Thiết kế website Cách kháng tài khoản quảng cáo Mua bán Fanpage Facebook Dịch vụ SEO Tổ chức sinh nhật