[SOLVED] CSS targeting Images that are linked and best ways to center multiple images on one line

CSS targeting Images that are linked and best ways to center multiple images on one line

I am new to CSS and html and I was wondering if you could help me. I am trying to make a page where people can go to my website and shop on any platform they want. I have managed to create the page in html but I couldn't get the four image (square) if you want to call it that... centered on the page.

Here is the HTML

    <!DOCTYPE html>


<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content= "width = device-width. initial-scale= 1"

    <!-- Links to other files -->

    <!-- Default Location -->

<base href= "http//home/makenna/Documents/Amazon Docs/Kittiesnmore Web Files"/>

<!-- Links to CSS Stylesheets -->
<link rel="CSS Stylesheet" type "text/css"href="sellpagestylesheet1.css"> <!-- This is the main style sheet -->


<title> Shop with us on your Favorite E-retailer's Website </title>

<body>

<div>

<h3> Shop with us on your favorite shopping platform! </h3>

</div>



< id= "all pics">
<a href= "http://kittiesnmore.com/index.php/shop/">
<img src="https://imgur.com/DTEzmL3.jpg" alt= "Shop on our Site" style= "width:500px; height:500px; border:5x; bordercolor:4C4646; align:center; bordercolor:00008B;" id= "kittiesnmoreLogo" > 
</a>



<a href= "https://www.amazon.com/s?marketplaceID=ATVPDKIKX0DER&me=A3O390GOKHZKJR&merchant=A3O390GOKHZKJR&redirect=true">
<img src="https://imgur.com/Icu5jwn.jpg"  alt="Shop our Amazon Inventory" style=" height=500px; width: 500px; height: 500 px; border: 5px;" id= "amazonLogo">
</a>




<p id="secondRow">
<a href= "http://www.ebay.com/sch/makennher-0/m.html?item=152544640003&rt=nc&_trksid=p2047675.l2562">
<img src="https://imgur.com/hNBGJwg.jpg" alt= "Shop our Ebay Inventory" style="width:500 px; height:500px; border: 5px;" id= "ebayLogo"> 
</a>




<a href= "https://kittiesnmore.myshopify.com/">
<img src="https://imgur.com/o1zeKZF.jpg" alt="Shop on our Shopify Store" style= "height:500px; width:500px; border:5px;" id="shopifyLogo">
</a>
</p>

Here si the CSS

<head>


<style>

#firstRow.kittiesnmoreLogo{

    *{font-family: "Arial Black" Gadget, sans-serif;}
    .website{ padding 10px 10px 10px 10px
    }

I would like to know the best way to target the images I have created in order to do the above, any improvements I should make to the way I have included them, or if there's something awfully terribly wrong.

Also I do apologize if my code is formatted incorrectly for this website, I am not really familiar with how to make code blocks >.<

Solution

Which software you use for coding, In your code it has too much syntax errors. first correct all off them, Then try using this,

#menu {
    max-width: 700px;
    text-align: center;
    margin: auto;
}
#menu img {
    width: 150px;
}

<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png">
</div>