My css messes when zooming etc

I am a first year student in comp sci so I have the very basics of html and css down, but someone has asked me to make a site for them so I tried. The problem I am having with the layout which goes absolutely haywire when I zoom in/out or inspect the site on the mobile devices in chrome. And also I find that white space in the site looks off and I am not sure what to do there.

Newbie help with someone elses CSS

I am not very good at CSS yet. I am trying to change a web page to suit our needs. The guy who created it started with someone else's template which is at;

There are parts of the page I am not fond of. He has buttons to go to outside pages, we need about six. They have large graphics and only two across. I want smaller graphics and four across. I put a sample of the HTML below.

Simple CSS positioning

I need to fix two elements on a page.
The first element is an .svg image, this one need to be in the middle of the page, always!
The second element is a text line, this one need to be in the bottom/center of the page, always!

The page is ready, but the second element is in the wrong position, it is at the top of the page, but I want it at the bottom.

That's what I've done...

Download link

How does my site look?

I have recently created a website,
I was wondering if people here could take the time to check it out and give feedback,



border / border radius and text alignment queries. Can you help?


I'm trying to style a table. This is the HTML (which I have to leave unaltered):

<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<title>Ultimate Frisbee - Teams</title>
	<link rel="stylesheet" href="css/hw1.css">
		<h1>Ulimate Frisbee Teams</h1>
			<a href="index.html">Home</a>
			<a href="history.html" class = "active">Teams</a>
			<a href="history.html">History</a>
			<a href="" target="_blank">USA Ultimate</a>
		<aside class = "left">

Syndicate content