Basically, I am importing the components into App.jsx and adjusting the sections in app.scss

Here is the App.jsx

import Contact from "./components/contact/Contact";
import Intro from "./components/intro/Intro";
import Portfolio from "./components/portfolio/Portfolio";
import Testimonials from "./components/testimonials/Testimonials";
import Topbar from "./components/topbar/Topbar";
import Works from "./components/works/Works";
import './app.scss'

function App() {
  return (
    <div className="app">
      <Topbar/>
      <div className="sections">
        <Intro/>
        <Portfolio/>
        <Works/>
        <Testimonials/>
        <Contact/>
      </div>
    </div>
  );
}

export default App;

Here is the app.scss

.app{
    height: 100vh;
    .sections{
        background-color: lightsalmon;
        width:100%;
        height: calc(100vh-70px);
        position: relative;
        top: 70px;
        
    }
}

It's supposed to look like this : Target

Now it looks like this : Current

CodePudding user response：

You missed the space between 100vh minus 70px height: calc(100vh-70px);

add space like this : height: calc(100vh - 70px);

For more check my code bellow

.app{
    height: 100vh; 
}
.header{
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
      background-color: #ddd;
      height: 70px;
}
.sections{
    background-color: lightsalmon;
    width:100%;
    height: calc(100vh - 70px);
    position: relative;
    top: 70px; 
}

<div class="app">
  <div class="header">
  
  </div>
  <div class="sections">
  
  </div>
</div>