External monitor and laptop screen is not showing the same design-CodePudding

I'm new to designing and I recently encountered this problem. I'm coding on my laptop which has a smaller screen than my external monitor which where i display my website. and as i was moving the website that i'm working to my laptop, i noticed that the size is not the same. 1st screenshot below is the display on my external monitor which i'm displaying the items as i want:

But as i move my website on my laptop the size became different:

Is there any way to fix this? I'm currently reading about media queries and wondering if this will fix my problem.

Oh btw below is my HTML and CSS code:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  color: rgb(48, 48, 48);
  line-height: 1.9;
  background-color: #f3f3f3;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
  padding-right: 150px;
  padding-top: 12px;
}

.logo img {
  width: 170px;
  height: 75px;
  padding-top: 8px;
  /* padding-right: ; */
  /* border: 2px solid black; */
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: 'Poppins', sans-serif;
  background-color: #f3f3f3;
  width: 100%;
  z-index: 100;
  height: 80px;
  /* position: relative; */
  /* border-bottom: 1px solid black; */
  /* padding: 0 5rem; */
}

.nav-links {
  display: flex;
  /* justify-content: space-around; */
  width: 30%;
}

.nav-links li {
  list-style: none;
  padding: 26px 40px;
}

.nav-links a {
  color: black;
  text-decoration: none;
  letter-spacing: 2px;
  font-size: 15px;
}

nav li:hover {
  background-color: rgb(6, 168, 106);
}

nav li:hover a {
  color: white;
}

/* Section */
.section {
  padding: 5rem 25rem;
  border-bottom: 1px solid rgb(187, 185, 185);
  /* display: flex; */
}

.section-header {
  display: flex;
}

.section1img {
  width: 300px;
  height: 400px;
  /* margin: 60px 150px; */
}

.section1Desc {
  padding: 20px 20px;
  margin-left: 50px;
  text-align: justify;
}

.btnLearnMore {
  background-color: rgb(12, 201, 160);
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin-top: 30px;
  font-size: 20px;
  color: white;
}

.bamboo-section {
  display: flex;
}

.imgBamboo {
  width: 300px;
  height: 400px;
}

.bamboo-description {
  /* margin-left: 125px; */
  margin-top: 50px;
}

.bamboo-description h3 {
  color: rgb(16, 143, 16);
}

.btnKalma {
  border: none;
  border-radius: 5px;
  background-color: rgb(25, 179, 145);
  color: white;
  padding: 5px;
  font-size: 17px;
  margin-top: 25px;
}

.btnKalma:hover {
  background-color: rgb(3, 143, 112);
}

.bamboo-description p {
  margin-top: 25px;
  text-align: justify;
  margin-right: 100px;
}

.lavender-section {
  display: flex;
  margin-top: 75px;
}

.lavender-description {
  margin-left: 100px;
  margin-top: 50px;
}

.lavender-description h3 {
  color: rgb(202, 0, 158);
}

.lavender-description p {
  text-align: justify;
  margin-top: 25px;
}

.imgLavender {
  width: 300px;
  height: 400px;
}

.btnHimbing {
  text-decoration: none;
  border: none;
  border-radius: 5px;
  background-color: rgb(165, 50, 180);
  color: white;
  padding: 5px;
  font-size: 17px;
  margin-top: 25px;
}

.btnHimbing:hover {
  background-color: rgb(122, 4, 138);
}

.intro-header {
  text-align: center;
}

.section-body {
  margin-top: 50px;
}

.benefits-body {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}

.first-box i {
  color: green;
  font-size: 25px;
  margin-top: 5px;
}

.second-box {
  margin-left: 375px;
}

.second-box i {
  color: rgb(165, 16, 165);
  font-size: 25px;
  margin-top: 5px;
}

.mainlist {
  list-style-type: none;
}

.mainlist li {
  margin-top: 15px;
}

.sublist {
  margin-left: 35px;
  list-style-type: square;
}

.imgAboutBamboo {
  width: 50%;
  /* height: 400px; */
  display: block;
  margin: 25px auto;
}

.imgAboutLavender {
  width: 50%;
  /* height: 400px; */
  display: block;
  margin: 25px auto;
}

.list-Details {
  margin-left: 50px;
}

.break-line {
  display: block;
  margin-top: 50px;
  border: 1px solid rgb(150, 146, 146);
}

.about-body {
  margin-top: 25px;
}
.about-himbing {
  margin-top: 25px;
}

<!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
      href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./src/fontawesome/css/all.min.css" />

    <link rel="stylesheet" href="./css/style.css" />
    <title>Deux Citronella Trading</title>

    <script defer src="./js/script.js"></script>
  </head>
  <body>
    <header>
      <nav>
        <div class="logo">
          <img src="./rsc/logo2.png" alt="" />
          <!-- <img src="./rsc/DeuxLogo.png" alt="Deux Logo" class="imgLogo" /> -->
        </div>
        <ul class="nav-links">
          <li class="nav-link"><a href="#">Home</a></li>
          <li class="nav-link"><a href="#">About</a></li>
          <li class="nav-link"><a href="#">Contact</a></li>
          <li class="nav-link"><a href="#">Products</a></li>
        </ul>
      </nav>
    </header>

    <section class="section" id="section-1">
      <div class="section-header">
        <img src="./rsc/room&linen.jpg" alt="" class="section1img" />
        <div class="section1Desc">
          <h3>ROOM & LINEN SPRAY</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            laoreet ipsum lorem, quis vulputate nunc venenatis vitae. Donec
            rhoncus elit at auctor pellentesque. Suspendisse luctus egestas
            vestibulum. Suspendisse finibus turpis eget orci fringilla, in
            pretium mauris facilisis. Fusce efficitur quam non odio tristique
            porta. Phasellus bibendum nibh egestas mi bibendum commodo. Donec
            lobortis ullamcorper eros quis vehicula. Pellentesque et neque a
            velit bibendum volutpat.
          </p>
          <button class="btnLearnMore">Learn More</button>
        </div>
      </div>
    </section>

    <section class="section" id="section-2">
      <div class="intro-header">
        <h2>Products</h2>
      </div>
      <div class="section-body">
        <div class="bamboo-section">
          <div class="bamboo-description">
            <h3>Room & Linen Spray: KALMA</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              laoreet ipsum lorem, quis vulputate nunc venenatis vitae. Donec
              rhoncus elit at auctor pellentesque. Suspendisse luctus egestas
              vestibulum. Suspendisse finibus turpis eget orci fringilla, in
              pretium mauris facilisis. Fusce efficitur quam non odio tristique
              porta. Phasellus bibendum nibh egestas mi bibendum commodo. Donec
              lobortis ullamcorper eros quis vehicula. Pellentesque et neque a
              velit bibendum volutpat.
            </p>
            <button class="btnKalma">About Kalma &DownArrow;</button>
          </div>
          <img src="./rsc/bamboo.jpg" alt="Bamboo Spray" class="imgBamboo" />
        </div>

        <div class="lavender-section">
          <img src="./rsc/lavender.jpg" alt="" class="imgLavender" />
          <div class="lavender-description">
            <h3>Room & Linen Spray: HIMBING</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              laoreet ipsum lorem, quis vulputate nunc venenatis vitae. Donec
              rhoncus elit at auctor pellentesque. Suspendisse luctus egestas
              vestibulum. Suspendisse finibus turpis eget orci fringilla, in
              pretium mauris facilisis. Fusce efficitur quam non odio tristique
              porta. Phasellus bibendum nibh egestas mi bibendum commodo. Donec
              lobortis ullamcorper eros quis vehicula. Pellentesque et neque a
              velit bibendum volutpat.
            </p>
            <button class="btnHimbing">About Himbing &DownArrow;</button>
          </div>
        </div>
      </div>
    </section>

    <section class="section" id="section-3">
      <div class="intro-header">
        <h2>BENEFITS</h2>
      </div>

      <div class="benefits-body">
        <div class="first-box">
          <ul class="mainlist">
            <li><i class="fas fa-spray-can"></i> <b>Room freshener</b></li>
            <ul class="sublist">
              <li>Leaving your rooms smelling fresh and relaxing</li>
            </ul>
            <li><i class="fas fa-spray-can"></i> <b>Insect Repellant</b></li>
            <ul class="sublist">
              <li>Helps prevent and control insect-borne diseases</li>
            </ul>
            <li><i class="fas fa-spray-can"></i> <b>Toilet Deodorizer</b></li>
            <ul class="sublist">
              <li>
                Neutralizes foul odors and disinfects toilet seats, sink and
                faucet knobs
              </li>
            </ul>
            <li><i class="fas fa-spray-can"></i> <b>Sanitizer</b></li>
            <ul class="sublist">
              <li>Sanitizes furnitures, toys and countertops</li>
            </ul>
          </ul>
        </div>
        <div class="second-box">
          <ul class="mainlist">
            <li><i class="fas fa-spray-can"></i> <b>Car Humidifier</b></li>
            <ul class="sublist">
              <li>Cleans car seats, door handles and neutralizes malodors</li>
            </ul>
            <li><i class="fas fa-spray-can"></i> <b>Air Purifier</b></li>
            <ul class="sublist">
              <li>
                Keeping the area smelling clean with its gentle smell, giving a
                relaxing environment
              </li>
            </ul>
            <li><i class="fas fa-spray-can"></i> <b>Workspace Cleaner</b></li>
            <ul class="sublist">
              <li>
                Effective multi-purpose cleaner from killing viruses and
                bacterias
              </li>
            </ul>
            <li><i class="fas fa-spray-can"></i> <b>Disinfectant Spray</b></li>
            <ul class="sublist">
              <li>Kills harmful microorganisms</li>
            </ul>
          </ul>
        </div>
      </div>
    </section>

    <section class="section" id="section-4">
      <div class="intro-header">
        <h2>ABOUT</h2>
      </div>
      <div class="about-body">
        <div class="about-kalma">
          <center><h3>Room & Linen: Kalma</h3></center>
          <img src="./rsc/aboutBamboo.png" alt="" class="imgAboutBamboo" />
          <p>
            Infused with <strong>PREMIUM BAMBOO ESSENTIAL OIL</strong> to relax
            your senses and <strong>CITRONELLA EXTRACT</strong> to repel
            insects. Have 70% ethyl alcohol & antibacterial agent to purify air
            and kill germs
          </p>
          <br />
          <h4>More details:</h4>
          <ul class="list-Details">
            <li>Natural</li>
            <li>Safe and effective</li>
            <li>Disinfectant</li>
            <li>Deodorizer</li>
            <li>Anti-Bacterial</li>
            <li>Insect Repellant</li>
          </ul>
        </div>
        <div class="break-line"></div>
        <div class="about-himbing">
          <center><h3>Room & Linen: Himbing</h3></center>
          <img src="./rsc/aboutLavender.jpg" alt="" class="imgAboutLavender" />
          <p>
            Sink into blissful relaxation with
            <strong>LAVENDER & CHAMOMILE</strong>. Its soothing aroma can help
            you let go of the day's troubles and find a deeper sense of peace.
            Clasically calming, it supports stress relief so your body and mind
            can properly rejuvenate.
          </p>
          <br />
          <h4>More details:</h4>
          <ul class="list-Details">
            <li>Natural</li>
            <li>Safe and effective</li>
            <li>Disinfectant</li>
            <li>Deodorizer</li>
            <li>Anti-Bacterial</li>
            <li>Insect Repellant</li>
          </ul>
        </div>
      </div>
    </section>
  </body>
</html>

CodePudding user response：

If the external monitor and laptop have the same resolution and you are using Windows 10 it might be that you have different scaling settings. Set it to 100% and test.

It's easy to find right click on desktop > Display settings > Display.

CodePudding user response：

I assumed what you mean by "the size" is the section's width. The problem is rem unit is not responsive.

Change this:

/* Section */
.section {
  padding: 5rem 25rem;
  border-bottom: 1px solid rgb(187, 185, 185);
  /* display: flex; */
}

To this:

/* Section */
.section {
  padding: 5rem 0; // remove the `25rem` value
  max-width: 80%; // or any percentage that match previous `25rem` horizontal padding value, or just any size that you want
  margin: 0 auto; // don't forget to set horizontal margin to `auto` to make it centered
  border-bottom: 1px solid rgb(187, 185, 185);
  /* display: flex; */
}