Recreating Google homepage for learning purposes Like other posters, I'm currently working on recreating Google's Homepage for The Odin Project.

I'm new to HTML and CSS but I'm eager to learn and have been looking around for an answer, testing different code, and pacing back &amp; forth - I'm still stuck.

I'm having an issue with positioning things on my project. I've read through W3School's documentation on CSS but the method in which I used to position my buttons "Google Search" &amp; "I'm feeling lucky" seems like a in-this-case-solution that may not work with all browsers or especially responsive design.

This is the area I'm trying to duplicate:



I was able to center the logo and the search bar with:

{margin-left: auto;
margin-right: auto;
display: block;}


I was able to center the buttons with:

#googleSearch {display: inline-block; margin-left: 520px;
margin-right: auto;}
#feelingLucky {display: inline-block;}


All of my code is below but my questions is: is there a better way to position the buttons and if so, what? Playing with the margin-left until it looks right seems to me like the equivalent of using a bunch of line breaks instead of changing the margin or padding. 



li {font-family: arial,sans-serif;
font-size: 13px; list-style: none; display: inline-block;}

nav {text-align: right; padding-right: 160px; word-spacing: 10px;}

#userName {opacity: .55;}

a, a:visited {color: black; text-decoration: none;}

a:hover {text-decoration: underline;}

img, #searchBox {display: block;
margin-left: auto;
margin-right: auto;}

img {margin-top: 200px}

#googleSearch {display: inline-block; margin-left: 520px;
margin-right: auto;}
#feelingLucky {display: inline-block;}
&lt;!DOCTYPE HTML&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;link rel="stylesheet" href="index.css"&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Google&lt;/title&gt;
&lt;link rel="shortcut icon" type="image/x-icon" href="http://www.google.com/favicon.ico"&gt;
    &lt;/head&gt;
&lt;body&gt;
&lt;header&gt;
&lt;nav&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;span id="userName"&gt;Jarod&lt;/span&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="https://accounts.google.com/ServiceLogin?passive=1209600&amp;continue=https%3A%2F%2Faccounts.google.com%2FManageAccount&amp;followup=https%3A%2F%2Faccounts.google.com%2FManageAccount"&gt;Gmail&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="https://www.google.com/imghp?hl=en&amp;tab=wi&amp;ei=yeCeVp3uLcyMmQH3mJ8w&amp;ved=0EKouCBYoAQ"&gt;Images&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;   
    &lt;/nav&gt;
    &lt;/header&gt;
&lt;img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo"&gt; 
    &lt;form action="#" method="get" name="searchForm"&gt;
    &lt;input id="searchBox" type="text" name="searchBox"&gt;&lt;br&gt;
        &lt;div id="googleSearch"&gt;
    &lt;input id="two" type="submit" value="Google Search"&gt;
            &lt;input id="feelingLucky" type="submit" value="I'm Feeling Lucky"&gt;

    &lt;/form&gt;
    &lt;/body&gt;
&lt;footer&gt;&lt;/footer&gt;
&lt;/html&gt;




Is there a better way to position my buttons?
Add both buttons in a single &lt;div&gt;, and center that div instead of the buttons individually.