Currently, I am working on a material UI app bar to serve as my navigation bar. The issue I am encountering involves the logo image on the left side of the page having excessive spacing from the edge, as shown in the image below. I've tried adjusting the margin with negative values, but that doesn't seem like the optimal solution for responsiveness. Does anyone have suggestions on how to tightly bind the image to the edge without too much space?
Here is the current state of the navigation bar with extra space on the left side:
https://i.stack.imgur.com/omoSV.png
Below is the code for the current component:
import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Menu from '@mui/material/Menu';
import MenuIcon from '@mui/icons-material/Menu';
import Container from '@mui/material/Container';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import MenuItem from '@mui/material/MenuItem';
import AdbIcon from '@mui/icons-material/Adb';
import logoSVG from '../assets/logo/logo.svg'
import { Link } from 'react-router-dom';
import { styled } from '@mui/material/styles';
const pages = ['Products', 'Pricing', 'Blog'];
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
// Component function and styling
export default MaterialNavBar;