You have padding and margins on both the UL and LI elements affecting the width. You could remove them or change them to get the result you desire. Look at the settings for those nested elements.
Sure. Your question is rather general. Based on that I would say that some people prefer to wrap all content with a element that can have default padding / margin as is done with the “client first” model. Everyone has a different approach. Mine is variables and CSS calc using an external stylesheet.