Your approach for large screens is correct, but I would suggest using negative margin instead of left positioning. Now, when the screen is smaller, your content container will ocupy all the width of the screen, so you cannot use a negative margin anymore because the logo will go outside the container, i.e. outside the screen.
In this case you will have to reset the left margin to 0 like this:
.header .logo-wrapper { margin-left: -15px; }
media only screen and (max-width: 768px) { // You can change the breakpoint to whatever you want
.header .logo-wrapper { margin-left: 0px; }
}
By Default magento 2 with sample data comes with luma themes.
In Luma Themes all static block and Top category page called from Widget.
You can check widget from
Content -> Elements -> Widget
There are list of widget are available here and all widget are assinged to Magento Luma Themes.
So when we create new theme, Based on parent luma theme, All sample data are missing in our new theme because widget are not set in Our custom theme.
If you want to display content same as Luma theme, You have to create new widget same as Luma theme from widget section from admin.
For Set Your Custom Theme logo,
You have to set from backend,
Content -> Design -> Configuration menu
Click on your current theme Edit link,
Go To Header section,
Click on Upload button on Logo Image,
Click Save Configuration.
Clear Browser cache and system cache.
Your Logo are Set for your custom theme.
Best Answer