/* This CSS rule removes the default margin from the element, ensuring that the page content starts flush with the edges of the viewport. */ body { margin: 0; } /* .sc-nav-warper ---------------- Container for the navigation section. - Uses flexbox layout for child elements. - Adds a top margin of 45px to separate from the top of the page. */ .sc-nav-warper{ display: flex; margin-top: 45px; } /* .sc-main-container ------------------ Sets the width of the main container to occupy 100% of its parent element. This ensures the container stretches fully across the available horizontal space. */ .sc-main-container { width: 100%; } /* .welcome Adds padding around the element to create space inside its border. - padding: 1em; // Applies uniform padding on all sides */ .welcome { padding: 1em; } /* Styles for the menu icon in the navigation. - Sets the font size to 24px for visibility. - Ensures single line height for vertical alignment. - Adds padding (12px top/bottom, 20px left/right) for clickable area and spacing. */ .menu-icon { font-size: 24px; line-height: 1; padding: 12px 20px; cursor: pointer; }