'h1 element in div behaving differently with other divs

So I have looked everywhere on stack overflow and counldn't find someone with a similar issue. I have two classes in the main body with a few different images in the divs. I am planning on switching through them with a slideshow using Jquery. The problem is that the h1 element which is "Boba Fusion" is inline in the first class but is on top of eachother in the second class so that boba is on one line and fusion is on another line. I have linked my HTML and CSS. What is causing the H1 to behave differently?

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');
* {
  margin: 0px;
  padding: 0px;
  font-family: 'Montserrat', sans-serif;
}


/* CSS stylings for nav */

a {
  text-decoration: none;
  color: inherit;
}

.container {
  display: flex;
  width: 100%;
}

nav ul {
  margin-top: 0px;
  background-color: #4B4B4B;
  margin-left: 0px;
  clip-path: polygon(1% 0, 100% 2%, 1000% 10000%);
}

nav ul li {
  display: inline-block;
  list-style: none;
  padding-left: 100px;
  font-size: 15px;
  color: white;
  margin-top: 0px;
  padding-bottom: 33px;
  flex: 2 0 0;
}

nav ul li:first-child {
  padding-left: 90px;
  margin-left: 0px;
}

nav ul li:nth-child(6) {
  padding-top: 20px;
  padding-right: 30px;
  margin-right: 0;
}

#bobaimg {
  padding-left: 25px;
  padding-top: 10px;
  margin: 0;
  display: block;
  flex: 1 0 0;
}


/* CSS styling for main content*/

.main-page {
  display: none;
  margin-top: 0px;
  text-align: center;
  min-height: calc(100vh - 40px);
  background-size: 1300px 700px;
  color: white
}

.main-page-2 {
  /* display: none; */
  margin-top: 0px;
  text-align: center;
  min-height: calc(100vh - 40px);
  background-size: 1300px 700px;
  color: white
}

#specials-head {
  padding-top: 50px;
}

.fusion-head {
  padding-top: 120px;
  float: left;
  position: absolute;
  padding-left: 30px;
  transform: scale(1.2);
}

#fusion-title {
  float: left;
  position: absolute;
  padding-left: 110px;
  transform: scale(1.4);
}

#about-img {
  transform: scale(0.8);
  margin-top: 40px;
  float: left;
}

#why-choose {
  transform: scale(12);
  margin-top: 200px;
  position: absolute;
  float: left;
  padding: 0;
  margin-left: 200px;
  left: 0;
  width: 120%;
}

#quality {
  transform: scale(0.8);
  margin-left: 470px;
  margin-top: 250px;
}

#flavour-btn {
  margin-bottom: 70px;
  margin-top: 280px;
  margin-left: 800px;
  color: gray;
  background-color: white;
  border: none;
  transform: scale(1.7);
  padding: 10px;
  font-size: 10px;
  font-weight: lighter;
  /* display: none; */
}

#flavour-btn:hover {
  cursor: pointer;
  transform: scale(1.8);
}

#slideshow {
  padding-top: 100px;
  padding-bottom: 50px;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: white;
  border-radius: 10%;
  display: inline-block;
  transition: background-color 0.6s ease;
  transform: scale(1.2);
}

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


/* CSS styling for footer*/

.footer {
  margin-top: 10px;
  margin-bottom: 0px;
}

.footer1-ul li {
  display: inline-block;
  list-style: none;
  padding-right: 10px;
  transform: scale(0.65);
  padding-bottom: 0px;
  margin-bottom: 0;
  padding-top: 0px;
  color: gray;
}

.footer1-ul {
  padding-top: 0px;
  padding-bottom: 0;
  float: left;
}

.footer2-ul {
  float: right;
  margin: 0;
  padding: 0;
}

.footer2-ul li {
  display: inline-block;
  margin-left: 0px;
  list-style: none;
  padding-right: 10px;
  transform: scale(0.65);
  padding-bottom: 0px;
  color: gray;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="about.css">
  <title>Boba Fusion</title>
</head>

<body class='main'>

  <!-- top nav bar and logo -->
  <div class="container">
    <div id="bobaimg">
      <a href="#home.html"><img src="/images/Boba Fusion logo (1).svg" alt="picture of bubble tea" width="150px"></a>
    </div>

    <div id="nav">
      <nav class='main-nav'>
        <ul class="nav-ul">
          <li>
            <a href="/home.html">Home +</a>
          </li>
          <li>
            <a href="/menu.html">Menu +</a>
          </li>
          <li>
            <a href="/specials.html">Specials +</a>
          </li>
          <li>
            <a href="/about.html">About Us +</a>
          </li>
          <li>
            <a href="/win.html">Win Prizes +</a>
          </li>
          <li>
            <a href="/cart.html"><img src="/images/cart-shopping-solid.svg" width="30px"></a>
          </li>
        </ul>
      </nav>
    </div>
  </div>

  <!-- Main content -->
  <div class="main-page" style="background-image: url(/images/aboutUs-back.png);">

    <div id="specials-head">
      <img src="/images/aboutus.png">
    </div>
    <div class="fusion-head">
      <h1 id="fusion-title">
        Boba Fusion
      </h1>
      <img src="/images/textbox-about.png" id="about-img">
    </div>
    <div>
      <a href="/menu.html"><button type="button" id="flavour-btn">Our Flavours</button></a>
    </div>

    <div style="text-align:center" id="slideshow">
      <span class="dot" onclick="currentSlide1()"></span>
      <span class="dot" onclick="currentSlide2()"></span>
    </div>
  </div>

  <div class="main-page-2" style="background-image: url(/images/aboutUs-back.png);">

    <div id="specials-head">
      <img src="/images/aboutus.png">
    </div>
    <div class="fusion-head">
      <h1 id="fusion-title">
        Boba Fusion
      </h1>
    </div>
    <div class="fusion-head">
      <img src="/images/why choose.png" id="why-choose">
    </div>
    <div>
      <img src="/images/quality.png" id="quality">
    </div>

    <div style="text-align:center" id="slideshow">
      <span class="dot" onclick="currentSlide1()"></span>
      <span class="dot" onclick="currentSlide2()"></span>
    </div>
  </div>

  <!-- footer -->
  <footer class="footer">
    <ul class="footer1-ul">
      <li>
        <img src="/images/location-dot-solid.svg" alt="location icon" width="15px"> 123 Name Street, Toronto, ON, M6E 1T9
      </li>
      <li>
        <img src="/images/phone-solid.svg" alt="phone icon" width="15px"> (+1) 416 456 789
      </li>
      <li>
        <img src="/images/envelope-solid.svg" alt="email icon" width="15px"> [email protected]
      </li>
    </ul>
    <ul class="footer2-ul">
      <li>
        <img src="/images/facebook-brands.svg" alt="location icon" width="15px">
      </li>
      <li>
        <img src="/images/twitter-brands.svg" alt="phone icon" width="15px">
      </li>
      <li>
        <img src="/images/youtube-brands.svg" alt="email icon" width="15px">
      </li>
      <li>
        <img src="/images/linkedin-brands.svg" alt="email icon" width="15px">
      </li>
    </ul>
  </footer>
  <script src="about.js"></script>
</body>

</html>

Solution 1:^[1]

You are using "transform: scale(1.2);" for the class ".fusion-head" so it scales your h1 once (because the h1 is inside it).

Then you are using "transform: scale(1.4);" for id "#fusion-title" so it scales it twice.

Solution 2:^[2]

One suggestion on your issue. Since you want the h1 element keeps the same style in both div. You can try to have a default CSS style in your file.

h1 {
    ...
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Rybak
Solution 2	Hello_World

'h1 element in div behaving differently with other divs

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]